JSFiddle - React, Tailwind, and code Playground

HTML

<select id="a1" class="answer">
    <option value="0">select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <select id="a2" class="answer">
   <option value="0">select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <select id="a3" class="answer">
   <option value="0">select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <select id="a4" class="answer">
   <option value="0">select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>

CSS

option:disabled{
  display: none;
}

JavaScript

var $selects = $('select.answer');

$('select.answer').change(function(){
	var $this = $(this);
  var id = $this.attr('id');
  
  var prevVal = parseInt($this.data('val'));
  var nextVal = parseInt($this.val());
  
  $selects.find('option[value='+ prevVal +']').removeAttr('disabled');
  
  if(nextVal > 0) {
  	$selects.not('#' + id).find('option[value='+ nextVal +']').attr('disabled', 'disabled');
  }

  $this.data('val', nextVal);
});