Динамически строить поля ввода после удаления начала индекса с наибольшего числа?

Question

У меня есть откуда пользователь должен иметь возможность добавлять новые строки.Моя логика работает нормально, и все новые поля становятся уникальными id's и names, но проблема возникает, когда я удаляю любую другую строку, кроме последней.Вот пример моего кода:

$("#add_row").on('click', addRow);

function addRow() {
  var index = $(".data-list").children('div').length + 1;
  console.log(index);

  $('.data-list').append(
    '<div class="form-group required data-item">' +
    '<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
    '<div class="row">' +
    '<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
    '<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
    '<option value="">--Choose--</option>' +
    '<option value="1">Record ID</option>' +
    '<option value="2">Name</option>' +
    '<option value="3">Year</option>' +
    '</select>' +
    '</div>' +
    '<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
    '<div class="input-group">' +
    '<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
    '<span class="input-group-btn">' +
    '<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
    '</span>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>'
  );
};

$(document.body).on('click', '.btn-remove', function() {
  $(this).closest('.data-item').remove();
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="data-section">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn" name="add_row" id="add_row">
                                                        <span class="glyphicon glyphicon-plus-sign"></span> Add Row
                                                    </button>
    </div>
  </div>
  <div class="data-list">
    <div class="form-group required data-item">
      <label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <select class="form-control" name="frm_column1" id="frm_column1" required>
            <option value="">--Choose--</option>
            <option value="1">Record ID</option>
            <option value="2">Name</option>
            <option value="3">Year</option>
          </select>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
          <input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
        </div>
      </div>
    </div>
  </div>
</div>

Если добавить еще две строки (общее количество строк 3) и удалить вторую строку, то в следующий раз, когда пользователь нажмет на Add Row, начнется индексс 3 и этот индекс уже существует.Мне интересно, как обойти эту проблему?Есть ли хороший способ начать индекс с последнего наибольшего числа?

Answer 1

Создайте переменную, в которой вы будете хранить последний назначенный идентификатор.Каждый раз, когда вы добавляете новый, я бы просто добавил один к нему.Таким образом, вы всегда будете получать уникальные идентификаторы и имена для ваших входов.Вы можете проверить следующий фрагмент кода, чтобы понять, что я имею в виду.

$("#add_row").on('click', addRow);
var counter = 1;

function addRow() {
  counter++;
  console.log(counter);
  $('.data-list').append(
    '<div class="form-group required data-item">' +
    '<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
    '<div class="row">' +
    '<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
    '<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
    '<option value="">--Choose--</option>' +
    '<option value="1">Record ID</option>' +
    '<option value="2">Name</option>' +
    '<option value="3">Year</option>' +
    '</select>' +
    '</div>' +
    '<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
    '<div class="input-group">' +
    '<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
    '<span class="input-group-btn">' +
    '<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
    '</span>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>'
  );
};

$(document.body).on('click', '.btn-remove', function() {
  $(this).closest('.data-item').remove();
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="data-section">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn" name="add_row" id="add_row">
                                                        <span class="glyphicon glyphicon-plus-sign"></span> Add Row
                                                    </button>
    </div>
  </div>
  <div class="data-list">
    <div class="form-group required data-item">
      <label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <select class="form-control" name="frm_column1" id="frm_column1" required>
            <option value="">--Choose--</option>
            <option value="1">Record ID</option>
            <option value="2">Name</option>
            <option value="3">Year</option>
          </select>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
          <input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
        </div>
      </div>
    </div>
  </div>
</div>