Change values of input dynamically added on change select option

I am using add remove input fields set via jquery.

I want to set input value of input depend on select option selected in that field set.

How to achieve this ?

Code:

var html_row = '<tr><td class="firstcell"></td><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td><td><input name="membership_number[]" value=""></td><td><input type="button" name="remove" id="remove_row" class="btn btn-info"  value="Remove This Section" tabindex="-1"></td></tr>';

var max = 50;
var x = 1;

$('#add_row').click(function() {
  if (x <= max) {
    $('#table_fields').append(html_row);
    var els = $(".firstcell");
    for (var i = 1; i < els.length; i++) {
      els[i].innerHTML = i + 1;
      $("select[name='is_member[]']").on('change', function() {

        var member_status = $(this).val();
        if (member_status == "No") {
          $("input[name='membership_number[]']").val("Not Member");
        } else {
          $("input[name='membership_number[]']").val("");
        }
      });
    }
  }
});


$('#table_fields').on('click', '#remove_row', function() {
  $(this).closest('tr').remove();
  x--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="table_fields">
  <tr>
    <td></td>
    <td>Is Member</td>
    <td>Membership Number</td>
  </tr>

  <tr>
    <td class="firstcell">1</td>
    <td>
      <select name="is_member[]">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </td>
    <td><input name="membership_number[]" value=""></td>
    <td></td>
  </tr>
</table>
<br><br>
<div class="text-center"><input type="button" name="add" id="add_row" class="btn btn-primary" value="Add Input Row" tabindex="-2"> </div>

With this code, value of membership_number field get changed but it is getting changed for all added rows of field set's input fields.

I want to change it only for select option of that specific field set in a added row.

JSFIDDLE

In jsfiddle, you can check by adding rows and changing is member option to No... all input fields values in membership number gets changed...

Solution

var html_row = '<tr><td class="firstcell"></td><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td><td><input name="membership_number[]" value=""></td><td><input type="button" name="remove" id="remove_row" class="btn btn-info"  value="Remove This Section" tabindex="-1"></td></tr>';

var max = 50;
var x = 1;

$('#add_row').click(function() {
  if (x <= max) {
    $('#table_fields').append(html_row);
    var els = $(".firstcell");
    for (var i = 1; i < els.length; i++) {
      els[i].innerHTML = i + 1;
    }
  }
});

$('#table_fields').on('change', "select[name='is_member[]']", function() {
  var member_status = $(this).val();
  var current_row = $(this).closest('tr');
  if (member_status == "No") {
    current_row.find("input[name='membership_number[]']").val("Not Member");
  } else {
    current_row.find("input[name='membership_number[]']").val("");
  }
});

$('#table_fields').on('click', '#remove_row', function() {
  $(this).closest('tr').remove();
  x--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="table_fields">
  <tr>
    <td></td>
    <td>Is Member</td>
    <td>Membership Number</td>
  </tr>

  <tr>
    <td class="firstcell">1</td>
    <td>
      <select name="is_member[]">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </td>
    <td><input name="membership_number[]" value=""></td>
    <td></td>
  </tr>
</table>
<br><br>
<div class="text-center"><input type="button" name="add" id="add_row" class="btn btn-primary" value="Add Input Row" tabindex="-2"> </div>

the issue is that you are selecting all elements with the name membership_number[] and changing their value collectively instead you should limit the change to the specific row where the select option was changed.