Reputation: 495

Dynamically create or remove form elements

I'm creating a Dynamic Form Elements in which I have to add multiple dependents.
My code is below.

In my project, I have to add at least one dependent which I have created using HTML, but user is allowed to add as much as the user wants, therefore I am using jQuery for this and creating the same form dynamically, on user button click, and also user have the choice to remove it.

I have applied some validation too, before adding up a new dependent, the user must fill out all the fields on a click of Add Dependant button. Further, on Add Dependant button I'm just validating the previous form using counter.

I'm using a Counter variable and checking the last added form using it, and incrementing it when user have created a form, and on remove I'm just decrementing it.

On Next button, I'm validating the whole form controls, because user may have deleted or left any field empty, therefore I'm checking this on the click of next button.

The problem is when add up 2 or more than 2 forms and then I remove the middle one or the 2nd one, Add Dependant and Next button stop doing anything, which is causing me problem. I want this form like user may add and delete anytime.

How can I achieve that?

var counter = 0;
var regexDoB = new RegExp('([0-9][1-2])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');

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

  $('#errorDepFirstName' + counter).html("");
  $('#errorDepLastName' + counter).html("");
  $('#errorDepDateOfBirth' + counter).html("");
  $('#errorDepGender' + counter).html("");
  $('#errorDepRelationship' + counter).html("");

  if ($('#txtDepFirstName' + counter).val() == '') {
    $('#errorDepFirstName' + counter).html("Please provide Dependent's First Name");
    $('#txtDepFirstName' + counter).focus();
    return false;
  } else if ($('#txtDepLastName' + counter).val() == '') {
    $('#errorDepLastName' + counter).html("Please provide Dependent's Last Name");
    $('#txtDepLastName' + counter).focus();
    return false;
  } else if ($('#txtDepDateOfBirth' + counter).val() == '') {
    $('#errorDepDateOfBirth' + counter).html("Please provide Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  } else if (!regexDoB.test($('#txtDepDateOfBirth' + counter).val())) {
    $('#errorDepDateOfBirth' + counter).html("Invalid Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  } else if ($('#ddDepGender' + counter).val() == -1) {
    $('#errorDepGender' + counter).html("Please select Dependent's Gender");
    $('#ddDepGender' + counter).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter).val() == -1) {
    $('#errorDepRelationship' + counter).html("Please select relation with Dependent");
    $('#ddDepRelationship' + counter).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter).val()) > 25) {
    $('#errorDepDateOfBirth' + counter).html("Child Dependent's must be age 25 or younger");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  } else {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

function getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

$("#btnNext").on('click', function(e) {
  e.preventDefault();
  for (var j = 0; j <= counter; j++) {
    $('#errorDepFirstName' + j).html("");
    $('#errorDepLastName' + j).html("");
    $('#errorDepDateOfBirth' + j).html("");
    $('#errorDepGender' + j).html("");
    $('#errorDepRelationship' + j).html("");
  }
  flag = true;
  for (var i = 0; i <= counter; i++) {
    if ($('#txtDepFirstName' + i).val() == '') {
      $('#errorDepFirstName' + i).html("Please provide Dependent's First Name");
      $('#txtDepFirstName' + i).focus();
      flag = false;
    } else if ($('#txtDepLastName' + i).val() == '') {
      $('#errorDepLastName' + i).html("Please provide Dependent's Last Name");
      $('#txtDepLastName' + i).focus();
      flag = false;
    } else if ($('#txtDepDateOfBirth' + i).val() == '') {
      $('#errorDepDateOfBirth' + i).html("Please provide Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if (!regexDoB.test($('#txtDepDateOfBirth' + i).val())) {
      $('#errorDepDateOfBirth' + i).html("Invalid Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if ($('#ddDepGender' + i).val() == -1) {
      $('#errorDepGender' + i).html("Please select Dependent's Gender");
      $('#ddDepGender' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == -1) {
      $('#errorDepRelationship' + i).html("Please select relation with Dependent");
      $('#ddDepRelationship' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter).val()) > 25) {
      $('#errorDepDateOfBirth' + i).html("Child Dependent's must be age 25 or younger");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    }
  }
  if (flag == true) {
    alert("No Error Found, Redirecting");
    //submission of data
  }
});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  counter--;
  $(this).parent().parent().remove();
});

function GetDynamicTextBox() {
  counter = counter + 1;

  var div = $("<div />");
  div.attr("class", 'my-3 border border-dark rounded p-3');
  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div />");
  divFormRow.attr("class", "form-row");

  var divRow1Col1 = $("<div />");
  divRow1Col1.attr("class", "form-group col-md-4");
  //FirstName
  var lblDepFName = $("<label />").attr("for", "txtDepFirstName" + counter);
  lblDepFName.attr("class", "font-weight-bold small");
  lblDepFName.html("First Name");

  var txtDepFName = $("<input />").attr("type", "text").attr("name", "DependentFName");
  txtDepFName.attr("placeholder", "First Name").attr("class", "form-control dep-name");
  txtDepFName.attr("id", "txtDepFirstName" + counter)

  var errorDepFName = $('<span />');
  errorDepFName.attr("class", "form-text text-danger small").attr("id", "errorDepFirstName" + counter);

  divRow1Col1.append(lblDepFName);
  divRow1Col1.append(txtDepFName);
  divRow1Col1.append(errorDepFName);

  divFormRow.append(divRow1Col1);


  var divRow1Col2 = $("<div />");
  divRow1Col2.attr("class", "form-group col-md-4");
  //Middle Name
  var lblDepMName = $("<label />").attr("for", "txtDepMiddleName" + counter);
  lblDepMName.attr("class", "font-weight-bold small");
  lblDepMName.html("Middle Name");
  var txtDepMName = $("<input />").attr("type", "text").attr("name", "DependentMName");
  txtDepMName.attr("placeholder", "Middle Name").attr("class", "form-control");
  txtDepMName.attr("id", "txtDepMiddleName" + counter)

  var errorDepMiddleName = $('<span />');
  errorDepMiddleName.attr("class", "form-text text-danger small").attr("id", "errorDepMiddleName" + counter);

  divRow1Col2.append(lblDepMName);
  divRow1Col2.append(txtDepMName);
  divRow1Col2.append(errorDepMiddleName);

  divFormRow.append(divRow1Col2);

  var divRow1Col3 = $("<div />");
  divRow1Col3.attr("class", "form-group col-md-4");
  //Last Name
  var lblDepLName = $("<label />").attr("for", "txtDepLastName" + counter);
  lblDepLName.attr("class", "font-weight-bold small");
  lblDepLName.html("Last Name");
  var txtDepLName = $("<input />").attr("type", "text").attr("name", "DependentLName");
  txtDepLName.attr("placeholder", "Last Name").attr("class", "form-control");
  txtDepLName.attr("id", "txtDepLastName" + counter)

  var errorDepLastName = $('<span />');
  errorDepLastName.attr("class", "form-text text-danger small").attr("id", "errorDepLastName" + counter);

  divRow1Col3.append(lblDepLName);
  divRow1Col3.append(txtDepLName);
  divRow1Col3.append(errorDepLastName);

  divFormRow.append(divRow1Col3);

  var divRow2Col1 = $("<div />");
  divRow2Col1.attr("class", "form-group col-md-4");
  //Date of Birth
  var lblDepDateOfBirth = $("<label />").attr("for", "DepDateOfBirth" + counter);
  lblDepDateOfBirth.attr("class", "font-weight-bold small");
  lblDepDateOfBirth.html('Date of Birth <span class="small">(MM/DD/YYYY)</span>');
  var txtDepDateOfBirth = $("<input />").attr("type", "text").attr("name", "DependentDateOfBirth");
  txtDepDateOfBirth.attr("placeholder", "MM/DD/YYYY").attr("class", "form-control");
  txtDepDateOfBirth.attr("id", "txtDepDateOfBirth" + counter)

  var errorDepDateOfBirth = $('<span />');
  errorDepDateOfBirth.attr("class", "form-text text-danger small").attr("id", "errorDepDateOfBirth" + counter);

  divRow2Col1.append(lblDepDateOfBirth);
  divRow2Col1.append(txtDepDateOfBirth);
  divRow2Col1.append(errorDepDateOfBirth);

  divFormRow.append(divRow2Col1);

  var divRow2Col2 = $("<div />");
  divRow2Col2.attr("class", "form-group col-md-4");
  //Gender
  var lblDepGender = $("<label />").attr("for", "ddDepGender" + counter);
  lblDepGender.attr("class", "font-weight-bold small");
  lblDepGender.html("Gender");
  var ddDepGender = $("<select></select>");
  ddDepGender.attr("name", "DepGender").attr("class", "form-control");
  ddDepGender.attr("id", "ddDepGender" + counter);
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  ddDepGender.append(optnGender);

  var errorDepGender = $('<span />');
  errorDepGender.attr("class", "form-text text-danger small").attr("id", "errorDepGender" + counter);

  divRow2Col2.append(lblDepGender);
  divRow2Col2.append(ddDepGender);
  divRow2Col2.append(errorDepGender);

  divFormRow.append(divRow2Col2);

  var divRow2Col3 = $("<div />");
  divRow2Col3.attr("class", "form-group col-md-4");
  //Relationship
  var lblDepRelationship = $("<label />").attr("for", "ddDepRelationship" + counter);
  lblDepRelationship.attr("class", "font-weight-bold small");
  lblDepRelationship.html("Relationship to Primary Applicant");
  var ddDepRelationship = $("<select></select>");
  ddDepRelationship.attr("name", "DependantRelationship").attr("class", "form-control");
  ddDepRelationship.attr("id", "ddDepRelationship" + counter);
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  ddDepRelationship.append(optnRelationship);

  var errorDepRelationship = $('<span />');
  errorDepRelationship.attr("class", "form-text text-danger small").attr("id", "errorDepRelationship" + counter);

  divRow2Col3.append(lblDepRelationship);
  divRow2Col3.append(ddDepRelationship);
  divRow2Col3.append(errorDepRelationship);

  divFormRow.append(divRow2Col3);
  div.append(header);
  div.append(divFormRow);
  return div;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3">
      <div class="border rounded border-dark p-3">
        <p class="lead font-weight-bold bg-light text-center p-1">
          Dependant Details
        </p>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="txtDepFirstName0" class="small font-weight-bold">
              First Name</label>
            <input type="text" class="form-control dep-name" id="txtDepFirstName0" name="DependentFName" placeholder="First Name" />
            <span id="errorDepFirstName0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepMiddleName0" class="small font-weight-bold">
              Middle Name</label>
            <input type="text" class="form-control" id="txtDepMiddleName0" name="DependentMName" placeholder="Middle Name" />
            <span id="errorDepMiddleName0" class="form-text text-danger"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepLastName0" class="small font-weight-bold">
              Last Name</label>
            <input type="text" class="form-control" id="txtDepLastName0" name="DependentLName" placeholder="Last Name" />
            <span id="errorDepLastName0" class="form-text text-danger small"></span>
          </div>

          <div class="form-group col-md-4">
            <label for="txtDepDateOfBirth0" class="small font-weight-bold">
              Date of Birth <span class="small">(MM/DD/YYYY)</span></label>
            <input type="text" class="form-control" id="txtDepDateOfBirth0" name="DependentDateOfBirth" placeholder="MM/DD/YYYY" />
            <span id="errorDepDateOfBirth0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepGender0" class="small font-weight-bold">
              Gender</label>
            <select id="ddDepGender0" class="form-control" name="DepGender">
              <option value="-1" selected="selected">Select Gender</option>
              <option value="M">Male</option>
              <option value="F">Female</option>
            </select>
            <span id="errorDepGender0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepRelationship0" class="small font-weight-bold">
              Relationship to Primary Applicant</label>
            <select id="ddDepRelationship0" class="form-control" name="DependantRelationship">
              <option value="-1" selected="selected">Select Relationship</option>
              <option value="SP">Spouse or Domestic Partner</option>
              <option value="CH">Child</option>
            </select>
            <span id="errorDepRelationship0" class="form-text text-danger small"></span>
          </div>
        </div>
      </div>
      <!--Textboxes will be added here -->
    </div>


  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary" />
    <br />
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right" />
  </div>
  <asp:Button Text="Save" ID="btnSave" CssClass="btn btn-danger btn-lg mt-5" OnClick="Process" runat="server" />
</div>

View on jsFiddle

Upvotes: 1

Answers (3)

Andam

Reputation: 2167

You are having a problem in counter variable and id of your fields.

Basically you are trying to get a form that does not exist. This happens when you are adding 2 extra forms witch result in input elements with id 1,2 and 3 but when you delete the middle one witch is 2 the counter is still at 3. So when you want to validate you inputs input 2 does not exist. Witch stop the JavaScript execution.

I fixed it by adding if elements in both loops in the next element button click event. witch they check if the element exist and then try to access it.

As you mentioned. Also delete counter-- when you are removing the form

var counter = 0;
var regexDoB = new RegExp('([0-9][1-2])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');
var getLastValidId = function(){
  var lastId = $('#TextBoxContainer').children().last().find("input").first().attr("id").match(/\d+/);
  return lastId;
}
$("#btAdd").on('click', function(e) {
  e.preventDefault();
  var counter1 = getLastValidId()
  $('#errorDepFirstName' + counter1).html("");
  $('#errorDepLastName' + counter1).html("");
  $('#errorDepDateOfBirth' + counter1).html("");
  $('#errorDepGender' + counter1).html("");
  $('#errorDepRelationship' + counter1).html("");

  if ($('#txtDepFirstName' + counter1).val() == '') {
    $('#errorDepFirstName' + counter1).html("Please provide Dependent's First Name");
    $('#txtDepFirstName' + counter1).focus();
    return false;
  } else if ($('#txtDepLastName' + counter1).val() == '') {
    $('#errorDepLastName' + counter1).html("Please provide Dependent's Last Name");
    $('#txtDepLastName' + counter1).focus();
    return false;
  } else if ($('#txtDepDateOfBirth' + counter1).val() == '') {
    $('#errorDepDateOfBirth' + counter1).html("Please provide Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter1).focus();
    return false;
  } else if (!regexDoB.test($('#txtDepDateOfBirth' + counter1).val())) {
    $('#errorDepDateOfBirth' + counter1).html("Invalid Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter1).focus();
    return false;
  } else if ($('#ddDepGender' + counter1).val() == -1) {
    $('#errorDepGender' + counter1).html("Please select Dependent's Gender");
    $('#ddDepGender' + counter1).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter1).val() == -1) {
    $('#errorDepRelationship' + counter1).html("Please select relation with Dependent");
    $('#ddDepRelationship' + counter1).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter1).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter1).val()) > 25) {
    $('#errorDepDateOfBirth' + counter1).html("Child Dependent's must be age 25 or younger");
    $('#txtDepDateOfBirth' + counter1).focus();
    return false;
  } else {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

function getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

$("#btnNext").on('click', function(e) {
  e.preventDefault();
  for (var j = 0; j <= counter; j++) {
  if($('#errorDepFirstName' + j).length > 0){
    $('#errorDepFirstName' + j).html("");
    $('#errorDepLastName' + j).html("");
    $('#errorDepDateOfBirth' + j).html("");
    $('#errorDepGender' + j).html("");
    $('#errorDepRelationship' + j).html("");
  }}
  flag = true;
  for (var i = 0; i <= counter; i++) {
  if($('#errorDepFirstName' + i).length > 0){
    if ($('#txtDepFirstName' + i).val() == '') {
      $('#errorDepFirstName' + i).html("Please provide Dependent's First Name");
      $('#txtDepFirstName' + i).focus();
      flag = false;
    } else if ($('#txtDepLastName' + i).val() == '') {
      $('#errorDepLastName' + i).html("Please provide Dependent's Last Name");
      $('#txtDepLastName' + i).focus();
      flag = false;
    } else if ($('#txtDepDateOfBirth' + i).val() == '') {
      $('#errorDepDateOfBirth' + i).html("Please provide Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if (!regexDoB.test($('#txtDepDateOfBirth' + i).val())) {
      $('#errorDepDateOfBirth' + i).html("Invalid Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if ($('#ddDepGender' + i).val() == -1) {
      $('#errorDepGender' + i).html("Please select Dependent's Gender");
      $('#ddDepGender' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == -1) {
      $('#errorDepRelationship' + i).html("Please select relation with Dependent");
      $('#ddDepRelationship' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter).val()) > 25) {
      $('#errorDepDateOfBirth' + i).html("Child Dependent's must be age 25 or younger");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    }}
  }
  if (flag == true) {
    alert("No Error Found, Redirecting");
    //submission of data
  }
});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();
});

function GetDynamicTextBox() {
  counter = counter + 1;

  var div = $("<div />");
  div.attr("class", 'my-3 border border-dark rounded p-3');
  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div />");
  divFormRow.attr("class", "form-row");

  var divRow1Col1 = $("<div />");
  divRow1Col1.attr("class", "form-group col-md-4");
  //FirstName
  var lblDepFName = $("<label />").attr("for", "txtDepFirstName" + counter);
  lblDepFName.attr("class", "font-weight-bold small");
  lblDepFName.html("First Name");

  var txtDepFName = $("<input />").attr("type", "text").attr("name", "DependentFName");
  txtDepFName.attr("placeholder", "First Name").attr("class", "form-control dep-name");
  txtDepFName.attr("id", "txtDepFirstName" + counter)

  var errorDepFName = $('<span />');
  errorDepFName.attr("class", "form-text text-danger small").attr("id", "errorDepFirstName" + counter);

  divRow1Col1.append(lblDepFName);
  divRow1Col1.append(txtDepFName);
  divRow1Col1.append(errorDepFName);

  divFormRow.append(divRow1Col1);


  var divRow1Col2 = $("<div />");
  divRow1Col2.attr("class", "form-group col-md-4");
  //Middle Name
  var lblDepMName = $("<label />").attr("for", "txtDepMiddleName" + counter);
  lblDepMName.attr("class", "font-weight-bold small");
  lblDepMName.html("Middle Name");
  var txtDepMName = $("<input />").attr("type", "text").attr("name", "DependentMName");
  txtDepMName.attr("placeholder", "Middle Name").attr("class", "form-control");
  txtDepMName.attr("id", "txtDepMiddleName" + counter)

  var errorDepMiddleName = $('<span />');
  errorDepMiddleName.attr("class", "form-text text-danger small").attr("id", "errorDepMiddleName" + counter);

  divRow1Col2.append(lblDepMName);
  divRow1Col2.append(txtDepMName);
  divRow1Col2.append(errorDepMiddleName);

  divFormRow.append(divRow1Col2);

  var divRow1Col3 = $("<div />");
  divRow1Col3.attr("class", "form-group col-md-4");
  //Last Name
  var lblDepLName = $("<label />").attr("for", "txtDepLastName" + counter);
  lblDepLName.attr("class", "font-weight-bold small");
  lblDepLName.html("Last Name");
  var txtDepLName = $("<input />").attr("type", "text").attr("name", "DependentLName");
  txtDepLName.attr("placeholder", "Last Name").attr("class", "form-control");
  txtDepLName.attr("id", "txtDepLastName" + counter)

  var errorDepLastName = $('<span />');
  errorDepLastName.attr("class", "form-text text-danger small").attr("id", "errorDepLastName" + counter);

  divRow1Col3.append(lblDepLName);
  divRow1Col3.append(txtDepLName);
  divRow1Col3.append(errorDepLastName);

  divFormRow.append(divRow1Col3);

  var divRow2Col1 = $("<div />");
  divRow2Col1.attr("class", "form-group col-md-4");
  //Date of Birth
  var lblDepDateOfBirth = $("<label />").attr("for", "DepDateOfBirth" + counter);
  lblDepDateOfBirth.attr("class", "font-weight-bold small");
  lblDepDateOfBirth.html('Date of Birth <span class="small">(MM/DD/YYYY)</span>');
  var txtDepDateOfBirth = $("<input />").attr("type", "text").attr("name", "DependentDateOfBirth");
  txtDepDateOfBirth.attr("placeholder", "MM/DD/YYYY").attr("class", "form-control");
  txtDepDateOfBirth.attr("id", "txtDepDateOfBirth" + counter)

  var errorDepDateOfBirth = $('<span />');
  errorDepDateOfBirth.attr("class", "form-text text-danger small").attr("id", "errorDepDateOfBirth" + counter);

  divRow2Col1.append(lblDepDateOfBirth);
  divRow2Col1.append(txtDepDateOfBirth);
  divRow2Col1.append(errorDepDateOfBirth);

  divFormRow.append(divRow2Col1);

  var divRow2Col2 = $("<div />");
  divRow2Col2.attr("class", "form-group col-md-4");
  //Gender
  var lblDepGender = $("<label />").attr("for", "ddDepGender" + counter);
  lblDepGender.attr("class", "font-weight-bold small");
  lblDepGender.html("Gender");
  var ddDepGender = $("<select></select>");
  ddDepGender.attr("name", "DepGender").attr("class", "form-control");
  ddDepGender.attr("id", "ddDepGender" + counter);
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  ddDepGender.append(optnGender);

  var errorDepGender = $('<span />');
  errorDepGender.attr("class", "form-text text-danger small").attr("id", "errorDepGender" + counter);

  divRow2Col2.append(lblDepGender);
  divRow2Col2.append(ddDepGender);
  divRow2Col2.append(errorDepGender);

  divFormRow.append(divRow2Col2);

  var divRow2Col3 = $("<div />");
  divRow2Col3.attr("class", "form-group col-md-4");
  //Relationship
  var lblDepRelationship = $("<label />").attr("for", "ddDepRelationship" + counter);
  lblDepRelationship.attr("class", "font-weight-bold small");
  lblDepRelationship.html("Relationship to Primary Applicant");
  var ddDepRelationship = $("<select></select>");
  ddDepRelationship.attr("name", "DependantRelationship").attr("class", "form-control");
  ddDepRelationship.attr("id", "ddDepRelationship" + counter);
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  ddDepRelationship.append(optnRelationship);

  var errorDepRelationship = $('<span />');
  errorDepRelationship.attr("class", "form-text text-danger small").attr("id", "errorDepRelationship" + counter);

  divRow2Col3.append(lblDepRelationship);
  divRow2Col3.append(ddDepRelationship);
  divRow2Col3.append(errorDepRelationship);

  divFormRow.append(divRow2Col3);
  div.append(header);
  div.append(divFormRow);
  return div;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3">
      <div class="border rounded border-dark p-3">
        <p class="lead font-weight-bold bg-light text-center p-1">
          Dependant Details
        </p>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="txtDepFirstName0" class="small font-weight-bold">
              First Name</label>
            <input type="text" class="form-control dep-name" id="txtDepFirstName0" name="DependentFName" placeholder="First Name" />
            <span id="errorDepFirstName0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepMiddleName0" class="small font-weight-bold">
              Middle Name</label>
            <input type="text" class="form-control" id="txtDepMiddleName0" name="DependentMName" placeholder="Middle Name" />
            <span id="errorDepMiddleName0" class="form-text text-danger"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepLastName0" class="small font-weight-bold">
              Last Name</label>
            <input type="text" class="form-control" id="txtDepLastName0" name="DependentLName" placeholder="Last Name" />
            <span id="errorDepLastName0" class="form-text text-danger small"></span>
          </div>

          <div class="form-group col-md-4">
            <label for="txtDepDateOfBirth0" class="small font-weight-bold">
              Date of Birth <span class="small">(MM/DD/YYYY)</span></label>
            <input type="text" class="form-control" id="txtDepDateOfBirth0" name="DependentDateOfBirth" placeholder="MM/DD/YYYY" />
            <span id="errorDepDateOfBirth0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepGender0" class="small font-weight-bold">
              Gender</label>
            <select id="ddDepGender0" class="form-control" name="DepGender">
              <option value="-1" selected="selected">Select Gender</option>
              <option value="M">Male</option>
              <option value="F">Female</option>
            </select>
            <span id="errorDepGender0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepRelationship0" class="small font-weight-bold">
              Relationship to Primary Applicant</label>
            <select id="ddDepRelationship0" class="form-control" name="DependantRelationship">
              <option value="-1" selected="selected">Select Relationship</option>
              <option value="SP">Spouse or Domestic Partner</option>
              <option value="CH">Child</option>
            </select>
            <span id="errorDepRelationship0" class="form-text text-danger small"></span>
          </div>
        </div>
      </div>
      <!--Textboxes will be added here -->
    </div>


  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary" />
    <br />
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right" />
  </div>
  <asp:Button Text="Save" ID="btnSave" CssClass="btn btn-danger btn-lg mt-5" OnClick="Process" runat="server" />
</div>
<button onclick="getLastValidId()">A</button>

Upvotes: 1

showdev

Reputation: 29168

As others have mentioned, decrementing counter throws off ID references when validating.

I suggest using classes rather than IDs. Then you can iterate through each .form-row and validate inputs within each block by using selector context or find(). Like this:

$('.errorFirstName', this)

Here's a demonstration:

var counter = 0;
var regexDoB = new RegExp('(0[1-9]|1[012])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');

function validateAll() {

  // set to valid by default, in case no forms exist.
  var valid = true;
  
  // select all form blocks and errors
  var $forms = $('.form-row');
  var $errors = $('.text-danger', $forms);
     
  // clear all errors
  $errors.empty();

  // iterate through all form blocks
  $forms.each(function() {

    // set block to invalid by default
    valid = false;

    // identify errors
    if ($('.inputFirstName', this).val() == '') {
      $('.errorFirstName', this).html("Please provide Dependent's First Name");
      $('.inputFirstName', this).focus();
    } else if ($('.inputLastName', this).val() == '') {
      $('.errorLastName', this).html("Please provide Dependent's Last Name");
      $('.inputLastName', this).focus();
    } else if ($('.inputDOB', this).val() == '') {
      $('.errorDOB', this).html("Please provide Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if (!regexDoB.test($('.inputDOB', this).val())) {
      $('.errorDOB').html("Invalid Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if ($('.inputGender', this).val() == -1) {
      $('.errorGender', this).html("Please select Dependent's Gender");
      $('.inputGender', this).focus();
    } else if ($('.inputRelationship', this).val() == -1) {
      $('.errorRelationship', this).html("Please select relation with Dependent");
      $('.inputRelationship', this).focus();
    } else if ($('.inputRelationship', this).val() == 'CH' && getAge($('.inputDOB', this).val()) > 25) {
      $('.errorDOB', this).html("Child Dependent's must be age 25 or younger");
      $('.inputDOB', this).focus();
    } else {
    
      // set block to valid
      valid = true;
      
    }

    // stop or continue block iteration
    return valid;

  });

  // return validity state
  return valid;

}

function GetDynamicTextBox() {

  var div = $("<div>", {
    'class': 'my-3 border border-dark rounded p-3'
  });

  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div>", {
    "class": "form-row"
  });

  //FirstName
  var divRow1Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepFName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "First Name"
  });
  var txtDepFName = $("<input>", {
    "type": "text",
    "name": "DependentFName",
    "placeholder": "First Name",
    "class": "form-control inputFirstName"
  });
  var errorDepFName = $('<span>', {
    "class": "form-text text-danger small errorFirstName"
  });

  lblDepFName.append(txtDepFName);
  divRow1Col1.append(lblDepFName).append(errorDepFName);
  divFormRow.append(divRow1Col1);

  //Middle Name
  var divRow1Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepMName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Middle Name"
  });
  var txtDepMName = $("<input>", {
    "type": "text",
    "name": "DependentMName",
    "placeholder": "Middle Name",
    "class": "form-control inputMiddleName"
  });
  var errorDepMiddleName = $('<span>', {
    "class": "form-text text-danger small errorMiddleName"
  });

  lblDepMName.append(txtDepMName);
  divRow1Col2.append(lblDepMName).append(errorDepMiddleName);
  divFormRow.append(divRow1Col2);

  //Last Name
  var divRow1Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepLName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Last Name"
  });
  var txtDepLName = $("<input>", {
    "type": "text",
    "name": "DependentLName",
    "placeholder": "Last Name",
    "class": "form-control inputLastName"
  });
  var errorDepLastName = $('<span>', {
    "class": "form-text text-danger small errorLastName"
  });

  lblDepLName.append(txtDepLName);
  divRow1Col3.append(lblDepLName).append(errorDepLastName);
  divFormRow.append(divRow1Col3);

  //Date of Birth
  var divRow2Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepDateOfBirth = $("<label>", {
    "class": "font-weight-bold small",
    "html": 'Date of Birth <span class="small">(MM/DD/YYYY)</span>'
  });
  var txtDepDateOfBirth = $("<input>", {
    "type": "text",
    "name": "DependentDateOfBirth",
    "placeholder": "MM/DD/YYYY",
    "class": "form-control inputDOB"
  });
  var errorDepDateOfBirth = $('<span>', {
    "class": "form-text text-danger small errorDOB"
  });

  lblDepDateOfBirth.append(txtDepDateOfBirth);
  divRow2Col1.append(lblDepDateOfBirth).append(errorDepDateOfBirth);
  divFormRow.append(divRow2Col1);

  //Gender
  var divRow2Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepGender = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Gender"
  });
  var ddDepGender = $("<select>", {
    "name": "DepGender",
    "class": "form-control inputGender"
  });
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  var errorDepGender = $('<span>', {
    "class": "form-text text-danger small errorGender"
  });
  
  ddDepGender.append(optnGender);
  lblDepGender.append(ddDepGender);
  divRow2Col2.append(lblDepGender).append(errorDepGender);
  divFormRow.append(divRow2Col2);

  //Relationship
  var divRow2Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepRelationship = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Relationship to Primary Applicant"
  });
  var ddDepRelationship = $("<select>", {
    "name": "DependantRelationship",
    "class": "form-control inputRelationship"
  });
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  var errorDepRelationship = $('<span>', {
    "class": "form-text text-danger small errorRelationship"
  });

  ddDepRelationship.append(optnRelationship);
  lblDepRelationship.append(ddDepRelationship);
  divRow2Col3.append(lblDepRelationship).append(errorDepRelationship);
  divFormRow.append(divRow2Col3);

  div.append(header);
  div.append(divFormRow);
  return div;

}

function getAge(dateString) {

  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

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

  var allValid = validateAll();
  if (allValid) {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

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

  var allValid = validateAll();
  if (allValid) {
    alert("No Error Found, Redirecting");
  }

});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  counter--;
  $(this).closest('.my-3').remove();
});

// add initial form block
var div = GetDynamicTextBox();
$("#TextBoxContainer").append(div);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3"></div>
  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary">
    <br>
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right">
  </div>
</div>

I've associated labels and inputs implicitly, by nesting inputs inside of their labels. That allowed me to get rid of counter altogether. If you prefer, you can associate them explicitly using incremented IDs (for=""). The idea is just not to use those IDs for validation iteration.

Edit

Above, I'm generating the initial form block from JavaScript, using the same function the "Add Button" uses. If you like, you can include the initial form block in your HTML, like you originally had it.

Like this:

var counter = 0;
var regexDoB = new RegExp('(0[1-9]|1[012])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');

function validateAll() {

  // set to valid by default, in case no forms exist.
  var valid = true;

  // select all form blocks and errors
  var $forms = $('.form-row');
  var $errors = $('.text-danger', $forms);

  // clear all errors
  $errors.empty();

  // iterate through all form blocks
  $forms.each(function() {

    // set block to invalid by default
    valid = false;

    // identify errors
    if ($('.inputFirstName', this).val() == '') {
      $('.errorFirstName', this).html("Please provide Dependent's First Name");
      $('.inputFirstName', this).focus();
    } else if ($('.inputLastName', this).val() == '') {
      $('.errorLastName', this).html("Please provide Dependent's Last Name");
      $('.inputLastName', this).focus();
    } else if ($('.inputDOB', this).val() == '') {
      $('.errorDOB', this).html("Please provide Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if (!regexDoB.test($('.inputDOB', this).val())) {
      $('.errorDOB').html("Invalid Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if ($('.inputGender', this).val() == -1) {
      $('.errorGender', this).html("Please select Dependent's Gender");
      $('.inputGender', this).focus();
    } else if ($('.inputRelationship', this).val() == -1) {
      $('.errorRelationship', this).html("Please select relation with Dependent");
      $('.inputRelationship', this).focus();
    } else if ($('.inputRelationship', this).val() == 'CH' && getAge($('.inputDOB', this).val()) > 25) {
      $('.errorDOB', this).html("Child Dependent's must be age 25 or younger");
      $('.inputDOB', this).focus();
    } else {

      // set block to valid
      valid = true;

    }

    // stop or continue block iteration
    return valid;

  });

  // return validity state
  return valid;

}

function GetDynamicTextBox() {

  var div = $("<div>", {
    'class': 'my-3 border border-dark rounded p-3'
  });

  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div>", {
    "class": "form-row"
  });

  //FirstName
  var divRow1Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepFName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "First Name"
  });
  var txtDepFName = $("<input>", {
    "type": "text",
    "name": "DependentFName",
    "placeholder": "First Name",
    "class": "form-control inputFirstName"
  });
  var errorDepFName = $('<span>', {
    "class": "form-text text-danger small errorFirstName"
  });

  lblDepFName.append(txtDepFName);
  divRow1Col1.append(lblDepFName).append(errorDepFName);
  divFormRow.append(divRow1Col1);

  //Middle Name
  var divRow1Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepMName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Middle Name"
  });
  var txtDepMName = $("<input>", {
    "type": "text",
    "name": "DependentMName",
    "placeholder": "Middle Name",
    "class": "form-control inputMiddleName"
  });
  var errorDepMiddleName = $('<span>', {
    "class": "form-text text-danger small errorMiddleName"
  });

  lblDepMName.append(txtDepMName);
  divRow1Col2.append(lblDepMName).append(errorDepMiddleName);
  divFormRow.append(divRow1Col2);

  //Last Name
  var divRow1Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepLName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Last Name"
  });
  var txtDepLName = $("<input>", {
    "type": "text",
    "name": "DependentLName",
    "placeholder": "Last Name",
    "class": "form-control inputLastName"
  });
  var errorDepLastName = $('<span>', {
    "class": "form-text text-danger small errorLastName"
  });

  lblDepLName.append(txtDepLName);
  divRow1Col3.append(lblDepLName).append(errorDepLastName);
  divFormRow.append(divRow1Col3);

  //Date of Birth
  var divRow2Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepDateOfBirth = $("<label>", {
    "class": "font-weight-bold small",
    "html": 'Date of Birth <span class="small">(MM/DD/YYYY)</span>'
  });
  var txtDepDateOfBirth = $("<input>", {
    "type": "text",
    "name": "DependentDateOfBirth",
    "placeholder": "MM/DD/YYYY",
    "class": "form-control inputDOB"
  });
  var errorDepDateOfBirth = $('<span>', {
    "class": "form-text text-danger small errorDOB"
  });

  lblDepDateOfBirth.append(txtDepDateOfBirth);
  divRow2Col1.append(lblDepDateOfBirth).append(errorDepDateOfBirth);
  divFormRow.append(divRow2Col1);

  //Gender
  var divRow2Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepGender = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Gender"
  });
  var ddDepGender = $("<select>", {
    "name": "DepGender",
    "class": "form-control inputGender"
  });
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  var errorDepGender = $('<span>', {
    "class": "form-text text-danger small errorGender"
  });

  ddDepGender.append(optnGender);
  lblDepGender.append(ddDepGender);
  divRow2Col2.append(lblDepGender).append(errorDepGender);
  divFormRow.append(divRow2Col2);

  //Relationship
  var divRow2Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepRelationship = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Relationship to Primary Applicant"
  });
  var ddDepRelationship = $("<select>", {
    "name": "DependantRelationship",
    "class": "form-control inputRelationship"
  });
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  var errorDepRelationship = $('<span>', {
    "class": "form-text text-danger small errorRelationship"
  });

  ddDepRelationship.append(optnRelationship);
  lblDepRelationship.append(ddDepRelationship);
  divRow2Col3.append(lblDepRelationship).append(errorDepRelationship);
  divFormRow.append(divRow2Col3);

  div.append(header);
  div.append(divFormRow);
  return div;

}

function getAge(dateString) {

  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

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

  var allValid = validateAll();
  if (allValid) {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

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

  var allValid = validateAll();
  if (allValid) {
    alert("No Error Found, Redirecting");
  }

});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  counter--;
  $(this).closest('.my-3').remove();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3">

      <div class="my-3 border border-dark rounded p-3">
        <p class="lead font-weight-bold bg-light text-center p-1">Dependant Details</p>
        <div class="form-row">
          <div class="form-group col-md-4"><label class="font-weight-bold small">First Name<input type="text" name="DependentFName" placeholder="First Name" class="form-control inputFirstName"></label><span class="form-text text-danger small errorFirstName"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Middle Name<input type="text" name="DependentMName" placeholder="Middle Name" class="form-control inputMiddleName"></label><span class="form-text text-danger small errorMiddleName"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Last Name<input type="text" name="DependentLName" placeholder="Last Name" class="form-control inputLastName"></label><span class="form-text text-danger small errorLastName"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Date of Birth <span class="small">(MM/DD/YYYY)</span><input type="text" name="DependentDateOfBirth" placeholder="MM/DD/YYYY" class="form-control inputDOB"></label><span class="form-text text-danger small errorDOB"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Gender<select name="DepGender" class="form-control inputGender"><option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option></select></label>
            <span class="form-text text-danger small errorGender"></span>
          </div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Relationship to Primary Applicant<select name="DependantRelationship" class="form-control inputRelationship"><option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option></select></label>
            <span class="form-text text-danger small errorRelationship"></span>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary">
    <br>
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right">
  </div>
</div>

Upvotes: 1

Mohicane

Reputation: 312

I think you have a problem with your counter variable.

When you remove a form in the middle, you decrement your counter ... but the previous form is still the same as before the removing.

Instead of using a counter, why don't you use previous and next function of Jquery?

Upvotes: 2

Dynamically create or remove form elements

Answers (3)

Edit

Related Questions