多个选择：一次选择禁用/隐藏/删除选择的选项

我正在尝试创建带有多个选择的表单，用户应将这些选择的排名从1-8降到最低。但是，我在隐藏/删除/禁用选择选项时遇到了一些麻烦。

这是我的表格，这只是要排名的8个选择中的前四个

  <label>Spirituality</label>\
 <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>School</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>Family</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>Friends</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>

这就是到目前为止我的脚本

$(document).ready(function () {
    $("#ranks1").click(function () {
        $('#ranks1 option').prop('disabled', true);
    });
});

我是为CSS做的。对于禁用选项

select option[disabled] {
    display: none !important;
}

有关表单外观的更多背景。