JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<select class="security ques_1 form-control" name="security1">
			<option value="1" >What is the name of your favourite teacher in primary school?</option>
			<option value="2" style="">What is your favourite sport?</option>
<option value="3" selected="" >What is your favourite subject?</option>		
	<option value="4" style="">What is the name of the first school you went to?</option>
			<option value="5" style="">What was your childhood nickname?</option>
			<option value="6" style="">What is your mother's maiden name?</option>
		</select>
   
<select class="security ques_2 form-control" name="security2">
			<option value="1">What is the name of your favourite teacher in primary school?</option>
			<option value="2" style="">What is your favourite sport?</option>
<option value="3" selected="" >What is your favourite subject?</option>		
	<option value="4" style="">What is the name of the first school you went to?</option>
			<option value="5" style="">What was your childhood nickname?</option>
			<option value="6" style="">What is your mother's maiden name?</option>
		</select>
        
    <select class="security ques_3 form-control" name="security3">
			<option value="1" >What is the name of your favourite teacher in primary school?</option>
			<option value="2" style="">What is your favourite sport?</option>
<option value="3" selected="" >What is your favourite subject?</option>		
	<option value="4" style="">What is the name of the first school you went to?</option>
			<option value="5" style="">What was your childhood nickname?</option>
			<option value="6" style="">What is your mother's maiden name?</option>
		</select>

CSS

select{
  margin-bottom:15px;
}

JavaScript

/*$('.security').change(function () {
    $('.security option').show(0);
	  $('.security option:selected').each(function () {

         var oIndex = $(this).index();



         if (oIndex >= 0) {
            $('.security').each(function () {

               $(this).children('option').eq(oIndex).not(':selected').hide(0);
            });
         }
      });
   });
   $('.security').change();

   $(".security option").each(function(){
  $(this).siblings("[value='"+ this.value+"']").remove();
  });*/
	$('.security').change(function () {
			var itmNo = $(this).attr('name').replace('security','');
      var itmSelected = $(this).val();
      var nxtItem = parseInt(itmNo)+1;

			/// Show All Options
			for(var x = nxtItem;x<=$('.security').length;x++){
        	$('select.security[name=security'+x+'] option').show();
      }
      
			/// Loop to all options and hide based on the previous select values
      for(var x = 1;x<=$('.security').length;x++){
      	var valToHide = 
        $('select.security[name=security'+x+']').val();
      	for(var y=2;x<=$('.security').length;y++){
        	$('select.security[name=security'+x+'] option[value='+valToHide+']').hide();
        }
      }
      
      var availableValue = 
      $('select.security[name=security'+nxtItem+'] option:visible:first-child').val();
      $('select.security[name=security'+nxtItem+']').val(availableValue);
      
      
      $('select.security[name=security'+nxtItem+']').change();
  });