добавить динамический c порядок добавления удалить html поле ввода

Question

у меня есть этот код для добавления / удаления динамического ввода c ввод:

JS:

$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<tr />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("tr").remove();
    });
});
function GetDynamicTextBox(value) {
  var number = Math.random();
    return '<td id="' + number + '"><input name = "DynamicTextBox" type="text" value = "' + value + '" class="form-control" /></td>' + '<td><select name="" class="form-control"><option> Select</option><option> Male</option><option> Female</option></select></td>' + '<td><input name = "DynamicTextBox" type="radio" value = "' + value + '" /></td>' + '<td><input name = "DynamicTextBox" type="checkbox" value = "' + value + '" /></td>'+'<td><input name = "order" type="number" value = "" /></td>' + '<td><button type="button" class="btn btn-danger remove"><i class="fas fa-times"></i></button></td>'
}

HTML:

<p>&nbsp;</p>
<h5 class="text-center">Dynamic Control : Text Box, Dropdown List, Radiobox and Checkbox</h5>
<section class="container">
<div class="table table-responsive">
<table class="table table-responsive table-striped table-bordered">
<thead>
    <tr>
        <td>TextBox</td>
        <td>Dropdown List</td>
        <td>Radio</td>
        <td>CheckBox</td>
        <td>Order</td>
        <td>BTN</td>
    </tr>
</thead>
<tbody id="TextBoxContainer">
</tbody>
<tfoot>
  <tr>
    <th colspan="5">
    <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="fas fa-plus"></i>&nbsp; Add&nbsp;</button></th>
  </tr>
</tfoot>
</table>
</div>
</section>

это код работает для меня, но как я могу добавить динамический c порядок (from 1 to ...) для каждой строки (td). мое среднее значение добавить заказ ввода от номера 1 и добавить +1 номер от последнего номера заказа.

демо здесь

обновление: (моя потребность)

Answer 1

Поскольку у вас уже могут быть строки и вам нужен порядок в них, каждый раз, когда вы добавляете строку, l oop над всеми из них добавляет переменную порядка.

Рабочий пример

$(function() {

  $("#btnAdd").on("click", function() {
    var div = $("<tr />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);  

    $("#TextBoxContainer tr").each(function(el, idx){
      $(this).attr("order", idx + 1)
    });

  });

  $("body").on("click", ".remove", function() {
    $(this).closest("tr").remove();
  });
});

function GetDynamicTextBox(value) {
  var number = Math.random();
  return '<td id="' + number + '"><input name = "DynamicTextBox" type="text" value = "' + value + '" class="form-control" /></td>' + '<td><select name="" class="form-control"><option> Select</option><option> Male</option><option> Female</option></select></td>' + '<td><input name = "DynamicTextBox" type="radio" value = "' + value + '" /></td>' + '<td><input name = "DynamicTextBox" type="checkbox" value = "' + value + '" /></td>' + '<td><input name = "order" type="number" value = "" /></td>' + '<td><button type="button" class="btn btn-danger remove"><i class="fas fa-times"></i></button></td>'
}

Примечание: не используйте .bind(), используйте .on()