Динамическая форма ввода JQuery

Question

У меня есть 2 таблицы:

Таблица Государственный

-------------------- 
| id_state | state | 
-------------------- 
| 1  | AAA | 
| 2  | BBB | 
| 3  | CCC | 
-------------------- 

Таблица Province

------------------------------------- 
| id_province | id_state | province | 
------------------------------------- 
| 1  | 1  | qqq  | 
| 2  | 1  | www  | 
| 3  | 1  | eee  | 
| 4  | 2  | rrr  | 
| 5  | 2  | ttt  | 
------------------------------------- 

Я хочу, чтобы сделать поле редактирования, которое может добавить область динамически, как это: Для например, запрос

"SELECT s.state, p.province FROM state s, province p WHERE p.id_state=s.id_state AND id_state=1" 

State : AAA 
Province: qqq 
      www 
      eee 

Значение провинции должно отображаться как форма ввода, все, что я хотел сделать, это добавить кнопку «удалить» рядом с вводом и добавить кнопку «добавить еще» под вкладкой.

State : AAA 
Province: qqq (remove) 
      www (remove) 
      eee (remove) 
      some value (remove) //if user click add more 
      (add more) 

Я новичок в JQuery, я попытался выполнить поиск в google, но я до сих пор не понимаю. До сих пор я пытался:

$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

And in the HTML: 
<div class="input_fields_wrap"> 
    <button class="add_field_button">Add More</button> 
    <div><input type="text" name="mytext[]"></div> 
</div> 

Но я хочу, чтобы поместить добавить больше кнопки ниже поля ввода, и я хочу повторить мои предыдущие данные из базы данных. Можете ли вы дать мне краткое объяснение по этому поводу? Спасибо.

Answer 1

Selamat malam.

Похоже, у вас еще нет кода на стороне сервера.

Если вы используете PHP, то попробуйте прочитать эту статью:

Учебник PHP Ajax вставки таблицы многорядные вместе: http://www.amitpatil.me/add-edit-delete-rows-dynamically-using-jquery-php/