Remove previously selected dropdown items

Question

I have a form that asks people to order something, lets just say "Red", "Blue", and "Green." Next to each color is a dropdown with the available order "1", "2", or "3".

If someone selects "2" for Red, I want to remove that option for the other colors that haven't been selected yet.

I'm not sure where to start. I am novice and have really only used HTML, CSS, and PHP although I have some javascript/jquery experience.

I'm messing around with the code below but need the "onchange" function to affect the SECOND dropdown and not the first...

function myFunction1() {
  var x = document.getElementById("mySelect");
  x.remove(x.selectedIndex);
}

<form>
  Select a fruit:
  <br>
  <select id="mySelect" onchange="myFunction1()">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
    <select id="mySelect2">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>
<br>

Answer 1

Not sure if this is what you are expecting:

function removeSelectedNumber() {
  var x = document.getElementById("numberSelect");
  x.remove(x.selectedIndex);
}

<form>
  Select a fruit:
  <br>
  <select id="colorSelect">
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
    <option>Yellow</option>
  </select>
  <select id="numberSelect" onchange="removeSelectedNumber()">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</form>
<br>