Dynamically add function to dynamic form elements using jquery

Question

I've created a webpage with dynamic form elements using jquery. Now I want to apply same functions to the dynamically added elements. How to do it?

Check this: https://jsfiddle.net/tz5w6fu4/1/

Here you can see that upon changing text of first text input field, there'll be new option which will be added to the select element next to it and then upon clicking / changing option of the select element, the text input will be changed in the text input field next to that. This is happening normally for the first element..

Now how can I add the same functionality to the the dynamically added form elements?

Answer 1

You cannot use same id for mutliple elements instead change them to classes . Then , using .find() and closest() get reference of the required element and change values there .

Demo Code :

$(document).on('change', '.abc', function() {
  var get_Select_reference = $(this).closest(".inputFormRow") //get closet div..
  get_Select_reference.find(".xyz").empty() //empty your select-box
  get_Select_reference.find(".def").val("") //empty input
  if ($(this).val() != "") {
    get_Select_reference.find(".xyz").append(new Option("Demo", "demo"));
    get_Select_reference.find(".xyz").append(new Option("Demo1", "demo1")); //append options..
  }
});
$(document).on('change', '.xyz', function() {
  var get_input_reference = $(this).closest(".inputFormRow").find(".def") //get input..
  var val = $(this).val(); //your select-box value
  get_input_reference.val(val);
});


// add row
$("#addRow").click(function() {
  var html = '';
  //added classes..
  html += '<div class="inputFormRow">';
  html += '<div class="input-group mb-3">';
  html += '<input type="text" name="title[]" class="form-control m-input abc"  placeholder="Enter title" autocomplete="off">';
  html += '<select name="ch[]" class="xyz">';
  html += '</select>';
  html += '<input type="text" name="name[]" class="form-control m-inpu t def">';
  html += '<div class="input-group-append">';
  html += '<button type="button" class="btn btn-danger removeRow">Remove</button>';
  html += '</div>';
  html += '</div>';

  $('#newRow').append(html);
});

//use class here as well
$(document).on('click', '.removeRow', function() {
  $(this).closest('.inputFormRow').remove();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container" style="max-width: 700px;">

  <form method="post" action="">
    <div class="row">
      <div class="col-lg-12">
        <!--added class-->
        <div class="inputFormRow">
          <div class="input-group mb-3">
            <input type="text" name="title[]" class="form-control m-input abc" id="abc" placeholder="Enter title" autocomplete="off">
            <select name="ch[]" class="xyz" id="xyz">
            </select>
            <input type="text" name="name[]" class="form-control m-input def" id="def">
            <div class="input-group-append">
              <button id="removeRow" type="button" class="btn btn-danger removeRow">Remove</button>
            </div>
          </div>
        </div>

        <div id="newRow"></div>
        <button id="addRow" type="button" class="btn btn-info">Add Row</button>
      </div>
    </div>
  </form>
</div>