Disable same select option on dynamically added select boxes

Question

I have multiple dynamically added select boxes. Options are also dynamically appended. Now what I want is if one of the select boxes with the value 'Lead' is selected now when the user adds another select box then the value with 'Lead' needs to be disabled as there should not be two 'Lead'. Please suggest to me how can I achieve this goal.

<div class="form-group">
    <label>Partner Organisation (If there are partners)</label>
    <table class="table table-bordered" id="dynamic_field">
        <tr>
            <td>
                <label for="tags">Organisation </label>
                <select class="form-control" name="stg_partner_id[]">
                    <option value="">Select</option>
                    @foreach($partnerorganisations as $pg)
                        <option value="{{ $pg->id }}">{{ $pg->partner_organisation }}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <label for="tags">Role </label>
                <select class="form-control" name="role[]">
                    <option value="">Select</option>
                    @foreach($roles as $role)
                        <option value="{{ $role }}">{{ $role }}</option>
                    @endforeach
            </select>
            </td> 
            <td>
                <button type="button" name="add" id="add" class="btn btn-success">+ </button>
            </td> 
        </tr>
    </table>
</div>

Now, my jquery looks like this.

var data = [<?php echo '"'.implode('","', $roles).'"' ?>];
var partnerdata = @json($partnerorganisations);
// console.log(app);
$(document).ready(function(){  
    var i=0;  
    $('#add').click(function(){  
        i++;  
        $('#dynamic_field').append('<tr id="row'+i+'"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption'+i+'"><option value="">Select</option></select></td><td><select class="form-control" name="role[]" id="newOption'+i+'"><option value="">Select</option></select></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>'); 
        // console.log(data);
        $.each(data, function(key, value) {
            $('#newOption'+i+'')
                .append($("<option></option>")
                .attr("value", value)
                .text(value)); 
        });

        $.each(partnerdata, function(key, value) {
            $("select option:contains('value " + value.id + "')").prop("disabled","disabled"); 
            $('#partnerOption'+i+'')
                .append($("<option></option>")
                .attr("value", value.id)
                .text(value.partner_organisation));  
        });
    });  
    $(document).on('click', '.btn_remove', function(){  
        var button_id = $(this).attr("id");   
        $('#row'+button_id+'').remove();  
    });  
});

Answer 1

As there will be mutliple select-boxes you can use .each loop to iterate through all select-boxes and then use that value to add disabled option from other select-box.

Demo Code :

$(document).ready(function() {
  var i = 0;
  $('#add').click(function() {
    i++;
    $('#dynamic_field').append('<tr id="row' + i + '"><td><select class="form-control" name="stg_partner_id[]" id="partnerOption' + i + '"><option value="">Select</option><option value="1">A</option><option value="2">B</option><option value="3">C</option></select></td><td><select class="form-control" name="role[]" id="newOption' + i + '"><option value="">Select</option><option value="1">A1</option> <option value="2">B2</option><option value="3">C2</option></select></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></th></tr>');
    //your other codes
    check_now(); //call to disable
  });
  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

  $(document).on('change', 'select[name*=stg_partner_id]', function() {
    check_now() //on change call as well
  })

  function check_now() {
    //remove disable from all options
    $("select[name*=stg_partner_id] option").prop('disabled', false)
    //loop through select box
    $("select[name*=stg_partner_id]").each(function() {
      var values = $(this).val()
      if (values != "") {
        //find option where value matches disable them
        $("select[name*=stg_partner_id]").not(this).find("option[value=" + values + "]").prop('disabled', true);
      }
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="form-group">
  <label>Partner Organisation (If there are partners)</label>
  <table class="table table-bordered" id="dynamic_field">
    <tr>
      <td>
        <label for="tags">Organisation </label>
        <select class="form-control" name="stg_partner_id[]">
          <option value="">Select</option>

          <option value="1">A</option>

          <option value="2">B</option>

          <option value="3">C</option>

        </select>
      </td>
      <td>
        <label for="tags">Role </label>
        <select class="form-control" name="role[]">
          <option value="">Select</option>
          <option value="1">A1</option>

          <option value="2">B2</option>

          <option value="3">C2</option>

        </select>
      </td>
      <td><button type="button" name="add" id="add" class="btn btn-success">+ 
                      </button></td>
    </tr>
  </table>
</div>