JSFiddle - React, Tailwind, and code Playground

HTML

<b>Start Time</b> <br /> 
<select name="btime">
<option value=""></option>
<option value="00:00:00">12:00am</option>
<option value="00:30:00">12:30am</option>
<option value="1:00:00">1:00am</option>
<option value="01:30:00">1:30am</option>
<option value="02:00:00">2:00am</option>
<option value="03:00:00">3:00am</option>
<option value="03:30:00">3:30am</option>
<option value="04:00:00">4:00am</option>
<option value="04:30:00">4:30am</option>
<option value="05:00:00">5:00am</option>
<option value="05:30:00">5:30am</option>
<option value="06:00:00">6:00am</option>
<option value="06:30:00">6:30am</option>
<option value="07:00:00">7:00am</option>
<option value="07:30:00">7:30am</option>
<option value="08:00:00">8:00am</option>
<option value="08:30:00">8:30am</option>
<option value="09:00:00">9:00am</option>
<option value="09:30:00">9:30am</option>
<option value="10:00:00">10:00am</option>
<option value="10:30:00">10:30am</option>
<option value="11:00:00">11:00am</option>
<option value="11:30:00">11:30am</option>
<option value="12:00:00">12:00pm</option>
<option value="12:30:00">12:30pm</option>
<option value="13:00:00">1:00pm</option>
<option value="13:30:00">1:30pm</option>
<option value="14:00:00">2:00pm</option>
<option value="14:30:00">2:30pm</option>
<option value="15:00:00">3:00pm</option>
<option value="15:30:00">3:30pm</option>
<option value="16:00:00">4:00pm</option>
<option value="16:30:00">4:30pm</option>
</select>



<br>

<b>End Time</b> <br /> 
<select name="etime">
<option value=""></option>
<option value="00:00:00">12:00am</option>
<option value="00:30:00">12:30am</option>
<option value="1:00:00">1:00am</option>
<option value="01:30:00">1:30am</option>
<option value="02:00:00">2:00am</option>
<option value="03:00:00">3:00am</option>
<option value="03:30:00">3:30am</option>
<option value="04:00:00">4:00am</option>
<option value="04:30:00">4:30am</option>
<option value="05:00:00">5:00am</option>
<option value="05:30:00">5:30am</option>
<option...

JavaScript

function convertTimestamp(ts) {
    var a = ts.split(':'); // split it at the colons
   // minutes are worth 60 seconds. Hours are worth 60 minutes.
    var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 
    return seconds;
}


$(document).on('change', '[name="etime"]', function(){
    var begin = convertTimestamp($('[name="btime"]').val());
    var end = convertTimestamp($('[name="etime"]').val());
    var totalSeconds = end - begin;
    var totalHours = (totalSeconds/60) / 60;
    $('#result').html('Total Hours: ' + totalHours);
    
})