JSFiddle - React, Tailwind, and code Playground

by rigid

HTML

<div style="border-bottom: 1px solid #eeeeee;margin-bottom: 20px;padding-bottom: 30px;" class="col_bx">
	<div style="float: left;width: 30%;" class="specialSelect" id="spsel1">
		<select style="margin-left: 12px;margin-right: 20px;width: 100px;" class="selmin1" name="datascre">
			<option value="10" selected="selected">10</option>
			<option value="20">20</option>
			<option value="30">30</option>
			<option value="40">40</option>
			<option value="50">50</option>
			<option value="60">60</option>
			<option value="70">70</option>
			<option value="80">80</option>
			<option value="90">90</option>
			<option value="100">100</option>
		</select>
		<select style="margin-left: 12px;margin-right: 20px;width: 100px;" class="selmin2" name="datascre1">
			<option value="10" disabled="">10</option>
			<option value="20" disabled="">20</option>
			<option value="30" selected="selected">30</option>
			<option value="40">40</option>
			<option value="50">50</option>
			<option value="60">60</option>
			<option value="70">70</option>
			<option value="80">80</option>
			<option value="90">90</option>
			<option value="100">100</option>
		</select>
	</div>
	<div style="float: left;width: 30%;" class="col_lft">
		<textarea id="datamsg" name="datamsg" cols="40" autocomplete="off" rows="5" class="wp-editor-area"></textarea>
	</div>
	<div style="float: left;width: 40%;" class="col_lft">
		<textarea id="datamsg" name="datamsg" cols="40" autocomplete="off" rows="5" class="wp-editor-area"></textarea>
	</div>
	<div style="clear: both;" class="clear"></div>
</div>

<div style="border-bottom: 1px solid #eeeeee;margin-bottom: 20px;padding-bottom: 30px;" class="col_bx">
	<div style="float: left;width: 30%;" class="specialSelect" id="spsel2">
		<select style="margin-left: 12px;margin-right: 20px;width: 100px;" class="selmin1" name="datascre2">
			<option value="10">10</option>
			<option value="20">20</option>
			<option value="30" selected="selected">30</option>
			<option...

JavaScript

$('.specialSelect').each(function(j) {
	var selId	=	$(this).attr('id');
	//alert(selId);
	$(this).children('.selmin1').on('change', function() {
		var sel2option	=	$(this).children('.selmin2').find('option');
		sel2option.prop('disabled', false);
		// get selected index of select1
		selIndex	=	$(this).children(".selmin1 option:selected").index();
		// disable all indexes below selected index
		   $('#'+selId+' .selmin2 option').each(function(i) {
				if(i<=selIndex){
					$('#'+selId+' .selmin2 option[value="' + this.value + '"]').prop('disabled', true); 
				}
		   })
	});
});