JSFiddle - React, Tailwind, and code Playground

by nadeemmnn2007

HTML

<h1>Worked Hours</h1>

<br />
<tr id="worked_hours" >
                    <td>From:</td>
                    <td>
                        H:<select name="from_hour" id="from_hour">
                            <option value='0'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option>                 </select>
                        M:<select name="from_minute" id="from_minute">
                            <option value='00'>00</option><option value='05'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option><option value='30'>30</option><option value='35'>35</option><option value='40'>40</option><option value='45'>45</option><option value='50'>50</option><option value='55'>55</option>                 </select>
                    </td>
                    <td>To:</td>
                    <td>
                        H:<select name="to_hour" id="to_hour">
                            <option value='00'>00</option><option value='01'>01</option><option value='02'>02</option><option value='03'>03</option><option value='04'>04</option><option value='05'>05</option><option value='06'>06</option><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option><option value='10'>10</option><option value='11'>11</option><option...

JavaScript

$('#to_hour').on("change",function(){
var items=  $('#ovt_f_hour')[0].options;
debugger;

var start_overtimeHour = $('#from_hour option:selected').text();
var end_overtime= $('#to_hour option:selected').text();
$.each(items,function(i,v){
		if(i>=start_overtimeHour&&i<=end_overtime){		
		}else{
        $(v).prop("disabled","disabled").css("background-color","#ccc");
        }
	});

var items1=  $('#ovt_t_hour')[0].options;

$.each(items1,function(i,v){
		if(i>=start_overtimeHour&&i<=end_overtime){		
		}else{
        $(v).prop("disabled","disabled").css("background-color","#ccc");
        }
	});
});