Restrict live an input field comparing it to another field

I have a php page and these two inputs fields. My goal is to check if the second input is equal to first input (live) and make an error msg. The code i have so far is this:

<div class="input-group date" id="timepicker1"              
    data-target-input="nearest">

    <input type="text"     
    class="form-control datetimepicker-input"
    data-target="#timepicker1"

    name="FirstDate" id="FirstDate"  />

</div>
<div class="input-group date" id="timepicker2"  
                                                                
    data-target-input="nearest">
    <input type="text" onclick="CheckForErrors()"

    class="form-control datetimepicker-input"
    data-target="#timepicker2"

    name="SecondDate" id="SecondDate"  />

</div>

In the end of the php i have a Javascript checking:

<script type="text/javascript">
    function CheckForErrors() {
      // Check if First Time is equal with second Time
      if (FirstDate == SecondDate) {
        alert("Error MSG!");
      }
      return false;
    }
</script>

Its not working, as u understand. Any help ? PS. I’m a begginer so please be patient 😀

Answer

I changed a little bit your code. First i remove the Tag inline assign of an eventListener (bad practice). Then i check on every keyup the fields. It works on both directions. Means if you start typing in the second field, it will check immediately with field one. and vice versa.

box = document.getElementById('doubleChecker');
box.addEventListener('keyup', (e) => {
  const i1 = document.getElementById('timepicker1').children[0]
  const i2 = document.getElementById('timepicker2').children[0]
  console.log(i1.value , i2.value)  
  if (i1.value == i2.value) {
    alert("Error MSG!");
    return false;
  }  
  
});

<div id="doubleChecker">
<div class="input-group date" id="timepicker1"      
    data-target-input="nearest">
    <input type="text" 
    class="form-control datetimepicker-input"
    data-target="#timepicker1"
    name="FirstDate" id="FirstDate"  />
</div>

<div class="input-group date" id="timepicker2"                                                                  
    data-target-input="nearest">
    <input type="text"
    class="form-control datetimepicker-input"
    data-target="#timepicker2"

    name="SecondDate" id="SecondDate"  />

</div>

</div>