title: How can I add input field and select dynamically?
body: <p>I have an input fields and a select option with MySQL values. How can I add dynamically more input fields and select with MySQL values? I'm trying to solve this, but the result is terrible:</p>
  
  <p><a href="https://i.stack.imgur.com/mkRn7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mkRn7.png" alt="enter image description here"></a></p>
  
  <p>I want to use this to update My database, and I can update multiple datas with it, but the Remove previous fields button doesn't working and there is +1 Add more button at the end. How can I solve this problem? I'm trying with the append method, but it doesn't working with MySQL datas.</p>
  
  <h2>index.php</h2>
  
  <pre><code>&lt;div class="form-group add-field"&gt;
    &lt;div class="partner"&gt;    
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;select name="partnerSelect[]" id="partnerSelect" class="form-control"&gt;
            &lt;option disabled selected value&gt; -- select an option -- &lt;/option&gt;
            &lt;?php                                       
              while($row = $partnerResult -&gt; fetch_array()) {
            ?&gt;
            &lt;option value="&lt;?php echo $row['partner_id'];?&gt;"&gt;&lt;?php echo $row['partner'];?&gt;&lt;/option&gt;
            &lt;?php
              }
            ?&gt;
            &lt;/select&gt;  
          &lt;/td&gt;
          &lt;td&gt;&lt;input type="text" placeholder="Enter description" name="description[]" id="description" class="form-control" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="btn btn-warning add-more"&gt;&lt;span&gt;+ Add More&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
  
      var data_fo = $('.add-field').html();
      var sd = '&lt;div class="btn btn-danger remove-add-more"&gt;Remove&lt;/div&gt;';
      var data_combine = data_fo.concat(sd);
      var max_fields = 5; //maximum input boxes allowed
      var wrapper = $(".partner"); //Fields wrapper
      var add_button = $(".add-more"); //Add button ID
  
      var x = 1; //initlal text box count
      $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x &lt; max_fields){ //max input box allowed
          x++; //text box increment
          $(wrapper).append(data_combine); //add input box
          //$(wrapper).append('&lt;div class="remove-add-more"&gt;Remove&lt;/div&gt;')
        }
        // console.log(data_fo);
      });
  
      $(wrapper).on("click",".remove-add-more", function(e){ //user click on remove text
          e.preventDefault();
          $(this).prev('.partner').remove();
          //$(".add-more").prev('.user').remove(); It's remove all the buttons and inputs
          $(this).remove();
          x--;
      });
   });
  &lt;/script&gt;
  </code></pre>