Jquery - Remove row.. but sequential order have to follow 1,2,3,4

Question

I used below JS & HTML to remove row on clicking of close icon. It works fine.

But, need to add additional 2 logics. Maximum 9 rows.

https://jsfiddle.net/jkenluv/4cj6qnye/3/

1. if item2 removed and item3 exists, item3 'id' have to change as item2.
2. If item2 removed on click close. If user clicks 'Add' again.. it have with item2. Not item3. What so ever case, sequence have to follow... item1, item2, item3, item4, item5, item6, item7, item8, item9.

JS:

var i = 2;
$("#addMoreNames").click(function() {
var temp_id = "add-name"+i;

var firstNameInput = $('<div />', {'class': 'col-lg-6 col-md-6 col-sm-6 campaign-firstname form-validate', 'data-campaign-contact-id': i}).append('<div class="form-title">Given name</div>').append($("<input />", { type: "text", id:"campaign-firstname-"+i, class: "name-validator", name: "First Name", "data-firstname": "First name is missing" }));

var lastNameInput = $("<div />", {'class': 'col-lg-5 col-md-5 col-sm-5 campaign-lastname form-validate', 'data-campaign-contact-id': i}).append('<div class="form-title">Family name</div>').append($("<input />", { type: "text", id:"campaign-lastname-"+i, class: "name-validator", name: "Last Name", "data-lastname": "Last name is missing" }));

$("<div />", { "class":"row-names", id:"add-name"+i })
.append(firstNameInput[0])
.append(lastNameInput[0])
.append('<div class="col-lg-1 col-md-1 col-sm-1 remove-flight"><a href="javascript:void(0);" aria-label="Remove">X</a></div>')
.appendTo("#add-more--names");

$('.remove-flight a').on('click', function(e){
  e.preventDefault();
  $(this).parent().remove();
});

i++;
if (i < 10){
  $(this).show();
} else {
  $(this).hide();
}

Thanks

Answer 1

I've changed the markup and code a "little" bit :)

For the markup (missing classes have been removed for optical reasons only!)

• I've added a container (div.person) to wrap the inputs in a logical unit.
• The numbered ids have been removed completely.
• Furthermore I've added the <div class="remove-flight"><a>X</a></div> but with style="display:none" to have less markup in the JavaScript part.

<div class="person">
  <div>
    <div>Given name</div>
    <input type="text" name="First Name" data-firstname="First name is missing" />
  </div>
  <div>
    <div>Family name</div>
    <input type="text" name="Last Name" data-lastname="Last name is missing" />
  </div>
  <div class="remove-flight" style="display:none">
    <a href="javascript:void(0);" aria-label="Remove">X</a>
  </div>
</div>

For the JavaScript part

• I've introduced a variable which defines how many "persons" are allowed (not really necessary, but I'm using it also in an alert(), hence...)
• The removal of persons is now handled with a delegated click event handler: $("#add-more--names").on("click", ".remove-flight", function(e) {...})
  With this change there is only one active handler which also is capable of handling dynamically added elements/persons
• The click handler for adding new persons now checks first if there is space for a new person. Otherwise it will fire an alert()
  If we're allowed to add a new person, we create a new person by cloning the first person in the DOM: var newPerson = $(".person:first").clone();
  We modify this new person as needed (add class row-names, clear the inputs, show div.remove-flight)
  and add it to the DOM: $("#add-more--names").append(newPerson);

$(document).ready(function() {
  var MaxNumberOfPersons = 3;

  $("#add-more--names").on("click", ".remove-flight", function(e) {
    e.preventDefault();
    $(this).closest(".person").remove();
  });

  $("#addMoreNames").on("click", function(e) {
    e.preventDefault();

    if ($("div.person").length < MaxNumberOfPersons) {
      var newPerson = $(".person:first").clone();

      newPerson.addClass("row-names");
      newPerson.find("input").val("");
      newPerson.find(".remove-flight").show();

      $("#add-more--names").append(newPerson);
    } else {
      alert("Only " + MaxNumberOfPersons + " persons allowed");
    }
  });
});

Working Example:

$(document).ready(function() {
  var MaxNumberOfPersons = 3;

  $("#add-more--names").on("click", ".remove-flight", function(e) {
    e.preventDefault();
    $(this).closest(".person").remove();
  });

  $("#addMoreNames").on("click", function(e) {
    e.preventDefault();

    if ($("div.person").length < MaxNumberOfPersons) {
      var newPerson = $(".person:first").clone();

      newPerson.addClass("row-names");
      newPerson.find("input").val("");
      newPerson.find(".remove-flight").show();

      $("#add-more--names").append(newPerson);
    } else {
      alert("Only " + MaxNumberOfPersons + " persons allowed");
    }
  });
});

div.person {
  margin: 10px;
  padding: 10px;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="person">
    <div class="col-lg-6 col-md-6 col-sm-6 campaign-firstname form-validate">
      <div class="form-title">Given name</div>
      <input class="name-validator" type="text" name="First Name" data-firstname="First name is missing" />
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 campaign-lastname form-validate">
      <div class="form-title">Family name</div>
      <input class="name-validator" type="text" name="Last Name" data-lastname="Last name is missing" />
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 remove-flight" style="display:none"><a href="javascript:void(0);" aria-label="Remove">X</a></div>
  </div>
</div>
<div class="row" id="add-more--names"></div>
<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12"><a class="btn" id="addMoreNames" href="javascript:void(0);" aria-label="Add name"><i class="fa fa-plus-circle" aria-hidden="true"> </i>Add Name</a></div>
</div>