jQuery for adding-delete button is not working

Question

For one of my clients, I have developed an inquiry form as per the need. The data to be entered may be of multiples for which I designed the dynamic form so that the rows may be increased or decreased. The add button in the form is working fine but the delete button is not working.

Please check the DEMO and code is given below.

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" class="i"  name="sl[]"><input type="text" class="l"  name="item[]"><input  type="text" class="j"  name="unit[]"><input type="text" class="j"  name="qty[]"/>&nbsp;<a href="#" class="remove_field">X</a></div>');

      //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});
    
$(document).ready(function() {
  $(".datepicker").datepicker({
    dateFormat: 'dd-M-yy'
  });
});

.k input {
  width: 95px;
  margin: 2px;
}
.i {
  width: 40px;
  margin: 3px;
  text-align: center;
}
.l {
  width: 390px;
  margin: 3px;
  text-align: left;
}
.j {
  width: 95px;
  margin: 3px;
  text-align: center;
}
.m {
  padding: 10px;
  margin: 5px;
  font-weight: bold;
  line-height: 25px;
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<form method="post" action="xxx/enq.php">
  <label>Name:</label>
  <input type="text" name="com" />
  <label>Required at:</label>
  <input type="text" name="req2" />
  <label>Location:</label>
  <input type="text" name="place" />
  <label>Required Dt:</label>
  <input type="text" name="req1" class="datepicker" />

  <div class="input_fields_wrap">
    <table>
      <tr>
        <td class="i">SL</td>
        <td class="l">ITEM DESCRIPTION</td>
        <td class="j">UNIT</td>
        <td class="j">QTY</td</tr>
    </table>
    <input type="text" class="i" name="sl[]">
    <input type="text" class="l" name="item[]">
    <input type="text" class="j" name="unit[]">
    <input type="text" class="j" name="qty[]">
    <button class="add_field_button">+</button>
  </div>

  <input type="submit" name='submit' onclick="show_confirm()" value="SUBMIT">
  <input type="reset" value="CLEAR">
</form>

I have tried in number of ways and googled but in vain.

Answer 1

Change the js of 'remove' functionality of the populated field

$(body).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})