При выборе опции во втором разделе «выбор» эта опция c не скрывается в первом разделе «выбор»

Question

Как тиражировать проблему: Если я выберу опцию в первом «select», эта опция c будет скрыта во 2-м «select». Однако затем, если я выберу опцию во 2-й «выбор», вновь выбранная опция не будет скрыта в 1-й «выбор»

Как мне это сделать? Каждый раз, когда я выбираю что-то, оно должно скрываться в других разделах "select"

$(function() {
  var sec = $('.security');
  sec.change(function() {
    console.log("security change!");
    let currentSelect = sec.find('option:selected').val();
    $('.security option').each(function() {
      var self = $(this);
      if (self.val() === currentSelect) {
        self.hide();
      } else {
        self.show();
      }
    });
  }).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6 form-group">
  <label for="security-question-1"><span class="trn">Security Question</span> 1 *</label>
  <select class="form-control security" id="security-question-1">
    <option class="trn" disabled selected value>select a question</option>
    <option class="trn" value="q1">What is the name of your first school?</option>
    <option class="trn" value="q2">What is your favorite movie?</option>
    <option class="trn" value="q3"> What is your mother's maiden name?</option>
    <option class="trn" value="q4">What street did you grow up on?</option>
  </select>
</div>

<div class="col-sm-6 form-group">
  <label for="security-question-2"><span class="trn">Security Question</span> 2 *</label>
  <select class="form-control security" id="security-question-2">
    <option class="trn" disabled selected value>select a question</option>
    <option class="trn" value="q1">What is the name of your first school?</option>
    <option class="trn" value="q2">What is your favorite movie?</option>
    <option class="trn" value="q3"> What is your mother's maiden name?</option>
    <option class="trn" value="q4">What street did you grow up on?</option>
  </select>
</div>

Answer 1

Попробуйте, проверьте мой комментарий, а также

$(function () {
      var sec = $('.security');
      sec.change(function () {
        let currentSelect=$(this).find('option:selected').val(); // Your code use sec.find() which is wrong since it picks the first selected option of first select.
        $('.security option').show();
        $('.security option[value="' + currentSelect + '"]').hide(); // This is shorter code.
      }).change();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6 form-group">
  <label for="security-question-1"><span class="trn">Security Question</span> 1 *</label>
  <select class="form-control security" id="security-question-1">
    <option class="trn" disabled selected value>select a question</option>
    <option class="trn" value="q1">What is the name of your first school?</option>
    <option class="trn" value="q2">What is your favorite movie?</option>
    <option class="trn" value="q3"> What is your mother's maiden name?</option>
    <option class="trn" value="q4">What street did you grow up on?</option>
  </select>
</div>

  <div class="col-sm-6 form-group">
    <label for="security-question-2"><span class="trn">Security Question</span> 2 *</label>
    <select class="form-control security" id="security-question-2">
      <option class="trn" disabled selected value>select a question</option>
      <option class="trn" value="q1">What is the name of your first school?</option>
      <option class="trn" value="q2">What is your favorite movie?</option>
      <option class="trn" value="q3"> What is your mother's maiden name?</option>
      <option class="trn" value="q4">What street did you grow up on?</option>
    </select>
  </div>