title: javascript dynamic mutiple inputs
body: <p>why not working this code?
  Maybe someone knows?</p>
  
  <p>Table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var postURL = "&lt;?php echo url('invoices/create') ?&gt;";
    var i = 1;
    // Add inputs
    $('#add').click(function() {
      i++;
      $('#dynamic_field').append('' +
        '&lt;tr id="row' + i + '"&gt;' +
        '&lt;td&gt;&lt;input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"&gt;&lt;/td&gt;' +
        '&lt;td&gt;&lt;input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"&gt;&lt;/td&gt;' +
        '&lt;td&gt;&lt;input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"&gt;&lt;/td&gt;' +
        '&lt;td&gt;&lt;button type="button" name="remove" id="' + i + '" class="btn btn-sm btn-danger btn-remove"&gt;X&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
    });
  
    // Remove inputs
    $(document).on('click', '.btn-remove', function() {
      var button_id = $(this).attr("id");
      $('#row' + button_id + '').remove();
    });
  
    $.ajaxSetup({
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table table-bordered" id="dynamic_field"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope="col"&gt;Description&lt;/th&gt;
        &lt;th scope="col"&gt;Qty&lt;/th&gt;
        &lt;th scope="col"&gt;Price&lt;/th&gt;
        &lt;th scope="col"&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button type="button" name="add" id="add" class="btn btn-sm btn-success"&gt;+&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>