JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selectHour">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

<select id="selectMinute">
  <option value="00">00</option>
  <option value="5">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>

<select id="selectAMPM">
    <option value="am">am</option>
    <option value="pm">pm</option>
</select>
  
<button>Calculate</button>

<p id="result"></p>

JavaScript

$('button').on('click',function myFunction() {
  var hour = document.getElementById("selectHour").value;
  var minute = document.getElementById("selectMinute").value;
  var ampm = document.getElementById("selectAMPM").value;

	var hourin24hourformat = hour;
  
  if(ampm === 'pm'){
		hourin24hourformat = (+hourin24hourformat)+12;
	}
  hourin24hourformat = hourin24hourformat-2;

	 ampm='am';
    if(hourin24hourformat==0){ //At 00 hours we need to show 12 am
    hourin24hourformat=12;
    }
    else if(hourin24hourformat>12)
    {
    hourin24hourformat=hourin24hourformat%12;
    ampm='pm';
    }else if(hourin24hourformat === 12){
     ampm='pm';
    }

  document.getElementById("result").innerHTML = hourin24hourformat + ":" + minute + " " + ampm;
});