Plusieurs Sélectionnez: désactiver / masquer / supprimer l'option sélectionnée en une seule sélection

J'essaie de créer un formulaire avec plusieurs sélections et l'utilisateur doit classer ces sélections de 1 à 8. Cependant, j'ai du mal à masquer / supprimer / désactiver l'option de sélection.

Voici mon formulaire, ce n'est que les quatre premiers des 8 sélections à être classés

  <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>

C'est ce que j'ai eu jusqu'ici pour mon script

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

Et je l'ai fait pour le CSS. Pour l'option désactivée

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

Plus d'informations sur l'apparence du formulaire.