PHP - Php Block Works In Bootstrap But Not Non-bootstrap

Hello all,

I have a website with a form that I want a user to fill out then if it is valid I have the button submit and I want it to email me. The message. If success full I want a message to popup on screen saying success I am using bootstrap 4

<div class="messageSuccess"></div>
            <div class="row">
                <div class="col-md-9 mb-md-0 mb-5">
                    <form id="contact-form" name="contact-form" action="" method="post"> <!--action="contactEmail.php" -->
                        <div class="row ">
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtName" name="txtName" required />
                                    <label for="txtName">Your Name </label>
                                    <div class="nameError"></div>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtEmail" name="txtEmail" required />
                                    <label id="lblEmail" for="txtEmail">Your Email Address </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form mb-0">
                                    <input class="form-control" type="text" id="txtSubject" name="txtSubject"  data-error="Subject Here" required />
                                    <label for="txtSubject">Subject </label>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form">
                                    <textarea class="form-control" type="text" id="txtMessage" name="txtMessage" rows="4" required data-error="Please leave us a message."></textarea>
                                    <label for="txtMessage">Your Message </label>
                                </div>
                            </div>
                        </div>                    
                    <div class="text-center text-md-left">
                        <input type="submit" id="BtnFormSubmit" class="btn btn-primary btn-xl text-white" value="Send Message" />
                    </div>
                    <div class="status"></div>
                    </form>
                <!-- JavaScript Inner File Form Validation -->
    <script type="text/javascript">
        $(document).ready(function () {
            var form = $("#contact-form");
            var name = $("#txtName").val();
            var email = $("#txtEmail").val();
            var subject = $("#txtSubject").val();
            var message = $("#txtMessage").val();
            var btnSubmit = $("BtnFormSubmit");

            $(form).submit(function (event) {
                
                if (this.checkValidity() == false) {
                    $(this).addClass("was-validated");
                    event.preventDefault();
                    event.stopPropagation();
                }

                alert("Form Valid to create message");
                if (!event.isDefaultPrevented) {
                    alert("passed prevent default");
                    var url = "testemail.php";
                    // POST values 'ajax'
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $(this).serialize(),
                        success: function (data) {  // done:
                            // data = JSON object object for contactEmail.php
                            // recieve message type: success | danger
                            var messageAlert = "alert- " + data.type;
                            var messageText = data.message;
                            // Bootstrap alert box HTML
                            var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" ' +
                                           'data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                            // if messageAlert and messageText
                            if (messageAlert && messageText) {
                                // Put message on page in messageSuccess section.
                                $(form).find("#messageSuccess").html(alertBox);
                                // Reset the form.
                                $(form)[0].reset();
                            }
                        }
                    });
                    //return false;
                }

            });
                       

            //$(name).blur(function () {
            //})

            // Validate :inputs
            $(":input").blur(function () {
                let controlType = this.type;

                switch (controlType) {
                    case "text":
                    case "password":
                    case "textarea":
                        validateText($(this));
                        break;
                    case "email":
                        validateEmail($(this));
                        break;
                    default:
                        break;
                }
            });
            
            // each :input focusin remove existing validation messages if any.
            $(":input").click(function () {
                $(this).removeClass("is-valid is-invalid");
            })

            /* OPTIONAL ':input' KEYDOWN validation messages remove */

            // Reset Form and remove all validation messages.
            $(":reset").click(function () {
                $(":input").removeClass("is-valid is-invalid");
                $(form).removeClass("was-validated");
            });
        });

        // Validate Text Function
        function validateText(control) {
            let textField = control.val();
            if (textField.length > 1) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }
        }

        // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/  )
        function validateEmail(control) {
            let textField = control.val();
            let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i;
            if (regexPattern.test(textField)) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }            
        }
    </script>
<?php

$from = 'SampleEmail@YourEmail.com';
$sendTo = 'sample@Gmail.com';
$subject = 'Your Message Subject Here';// Email Message Contact Form Fields
// Array - ($varName => Text from controls)
$controls = array('txtName' => 'Name', 'txtEmail' => 'Email', 'txtSubjext' => 'Subject', 'txtMessage' => 'Message');
$successMessage = 'Contact Message Successfully Sent. Thank you, I will get back to you soon.';
$errorMessage = 'There was an error submitting your message, Please try again. Or try later.';
error_reporting(E_ALL & ~E_NOTICE);
try {
	if(count($_POST) == 0) throw new \Exception('Contact Form Message is empty');
	$emailText = "You have a new message from your contact form\n------------------------------------------------------\n";
	foreach($_POST as $key => $value) {
		if(isset($controls[$key])) {
			$emailText .= "$controls[$key]: $value\n";
		}
	}
	$headers = array('Content-Type: text/plain; charset="UTF-8";',
					 'From: ' . $from,
					 'Reply-To: ' . $from,
					 'Return-Path: ' . $from,
					);
	// Send email
	mail($sendTo, $subject, $emailText, implode("\n", $headers));
	$responseArray = array('type' => 'success', 'message' => $successMessage);
}
catch(\Exception $e) {
	$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// If AJAX request return JSON response **RARE**
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
	$encodedJSON = json_encode($responseArray);
	header('Content-Type: application/json');
	echo $encodedJSON;
}
else {
	echo $responseArray['message'];
}
?>

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

        /**
         * Called when all validations are completed
         */
        _submit: function() {
            var isValid   = this.isValid(),
                eventType = isValid ? this.options.events.formSuccess : this.options.events.formError,
                e         = $.Event(eventType);

            this.$form.trigger(e);

            // Call default handler
            // Check if whether the submit button is clicked
            if (this.$submitButton) {
                isValid ? this._onSuccess(e) : this._onError(e) ;
										

            }
        },

$("document").ready(function(){
							 
  $(".js-ajax-php-json").submit(function(){
										   
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "https://www.telekom.ro/delivery/formAction/fix-mobil/response.php", //Relative or absolute path to response.php file
      data: data,
      success: function(data) {
		  
        $(".the-return").html(
          //"Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
		  data["ok"]
        );
 
         $(".error").html(
		  data["error"]
        );

 
        //alert("Form submitted successfully.\nReturned json: " + data["json"]);
      },
	   
	  
	  
    });
    return false;
  });
});

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div class="container">
   <nav>
      <ul>
           <li><a href="#"> Home </a></li>
      </ul>
   </nav>
</div>