JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Booking</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <form action="includes/sendMail.php"  method="POST" name="reservation-form"  id="reservation-form">
        <div>
            <select class="select-dropbox" name="mail-hour">
                <option value="" disabled>Hour</option>
                <option value="1" selected>1</option>
                <option value="2">2</option>
            </select>
        </div>

        <div>
            <input type="text" name="mail-phone" value="33" placeholder="Phone Number"
            >
        </div>
        <div>
            <input type="text" name="mail-email" value="[email protected]" placeholder="Email Address" >
        </div>
        <div>
            <textarea name="mail-msg" placeholder="Your Message"  >Test Mail</textarea>
        </div>
        <div id="check-form">
        </div>
        <div>
            <button id="mail-submit" name="mail-submit" type="submit">BOOK A TABLE</button>
        </div>
    </form>
</body>
</html>

JavaScript

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};


$(document).ready(function(){
  $('#mail-submit').click(function(event){
    event.preventDefault();
    var d = $('#reservation-form').serializeObject();
    d = JSON.stringify(d);
    $.ajax({
      contentType: "application/json; charset=utf-8",
      dataType: 'JSON',
      url: 'includes/sendMail.php',
      type: 'POST',
      data: d,
      beforeSend: function(xhr){
        $('#mail-submit').html('SENDING...');
      },
      success: function(res){
       if(res){
        var response=parseJSON(res);
        alert(response);
        if(response['signal'] == 'ok'){
         $('#check-form').html('<div>'+ response['res-msg']  +'</div>');

       }
       else{
        $('#check-form').html('<div>'+ response['res-msg'] +'</div>');
      }
    }
  },
  error: function(xhr, status, thrown){
    alert("xhr: "+xhr+" status: "+status+" thrown: "+thrown);
    $('#check-form').html('<div>An Error occurs. Please try again.</div>');
  },
  complete: function(){

    $('#mail-submit').html('BOOK A TABLE');
  }
});
  });
});