JSFiddle - React, Tailwind, and code Playground

by Arshdeep Singh

HTML

<script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>
		
<select class="fromWhen form-control" name="From" id="">
    <option value="0">Select Time From</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">1:00 PM</option>
    <option value="13:30:00">1:30 PM</option>
    <option value="14:00:00">2:00 PM</option>
</select>


<select class="untilWhen form-control " name="Until" id="">
    <option value="0">Select Time Until</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">1:00 PM</option>
    <option value="13:30:00">1:30 PM</option>
    <option value="14:00:00">2:00 PM</option>
</select>

JavaScript

$(document).ready(function(){
	var data = $(".untilWhen").html();
  $(".untilWhen").html("");
  
  $(".fromWhen").on('change',function(){
  	var fromval = $(this).val();
    $(".untilWhen").html(data);
    $(".untilWhen").find("option").each(function(){
    var obj = $(this);
    	if(obj.val()<=fromval)
      {
obj.remove();
			}
    });
    
  });
  
});