Dynamically adding table row beside the first table row instead after the first table row using javascript

Question

I dont know why when I am trying to add a table row on my table.It only add beside the first table row instead after the first table row.

<div class="panel-body">
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
        <thead>
          <tr>
          <th width="10%">Quantity</th>
          <th width="10%">Unit</th>
          <th width="30%">Item Description</th>
          <th width="10%">Stock No.</th>
          <th width="10%">Estimated Unit Cost</th>
          <th width="10%">Estimated Cost</th>
          </tr>
        </thead>
        <tr class="wrap_inputs">
        <td><input type="numer" name="quantity[]" class="form-control"></td>
        <td><input type="numer" name="unit[]" class="form-control"></td>
        <td><input type="text" name="item_description[]" class="form-control"></td>
        <td><input type="numer" name="stock_no[]" class="form-control"></td>
        <td><input type="numer" name="eunitcost[]" class="form-control"></td>
        <td><input type="numer" name="ecost[]" class="form-control"></td>
        </tr>

     </table>
</div>

and my javascript to add table row is this

<script type="text/javascript">
$(document).ready(function() {

var max_fields      = 10;
var wrapper         = $(".wrap_inputs");
var add_button      = $(".add_form_field");

var x = 1;
$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++;
        $(wrapper).append('<tr>');
        $(wrapper).append('<td><input type="numer" name="quantity[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="unit[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="text" name="item_description[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="stock_no[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="eunitcost[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="ecost[]" class="form-control"></td>');
        $(wrapper).append('</tr>');
    }
else
{
  alert('You Reached the limits')
 }
});

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

a screenshot of what is happening when i click the button to add a tablerow

what might I could gone wrong? On putting the wrap_input class or my javascript code?

Answer 1

You're adding the new elements to the original table row by appending them to "wrap_inputs" which is in fact the first row so you're in a way nesting the appended row within the hardcoded one

try wrapping all rows with

<tbody id="wrap_inputs">
    ... your TR ...
</body>

this way, when appending childs to wrap_inputs you'll be adding them to the table body and not the first row

Answer 2

It is happening because of this line $(wrapper).append('<tr>')...; Here $(".wrap_inputs"); is a tr and this snippet $(wrapper).append('<tr>') will create another tr inside it.

Also note wrapper is a query object, you can avoid putting $ before it and also avoid multiple append. Either you can do .append("<tr><td>...</td></tr>) or use use backtick to create string literal

 $(document).ready(function() { var max_fields = 10; var wrapper = $("#dataTables-example tbody"); var add_button = $(".add_form_field"); var x = 1; add_button.click(function(e) { e.preventDefault(); if (x < max_fields) { x++; wrapper.append(`<tr> <td><input type="numer" name="quantity[]" class="form- control"></td> <td><input type="numer" name="unit[]" class="form-control"></td> <td><input type="text" name="item_description[]" class="form-control"</td> <td><input type="numer" name="stock_no[]" class="form-control"></td> <td><input type="numer" name="eunitcost[]" class="form-control"></td> <td><input type="numer" name="ecost[]" class="form-control"></td> </tr>`); } else { alert('You Reached the limits') } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-body"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th width="10%">Quantity</th> <th width="10%">Unit</th> <th width="30%">Item Description</th> <th width="10%">Stock No.</th> <th width="10%">Estimated Unit Cost</th> <th width="10%">Estimated Cost</th> </tr> </thead> <tbody> <tr class="wrap_inputs"> <td><input type="numer" name="quantity[]" class="form-control"></td> <td><input type="numer" name="unit[]" class="form-control"></td> <td><input type="text" name="item_description[]" class="form-control"></td> <td><input type="numer" name="stock_no[]" class="form-control"></td> <td><input type="numer" name="eunitcost[]" class="form-control"></td> <td><input type="numer" name="ecost[]" class="form-control"></td> </tr> </tbody> </table> </div> <button type="button" class="add_form_field">Add</button>