Bootstrap Modal in php not closing - php

Question

I have a modal script that I created in php and the script works fine but the php closing tag ?> is not closing at the end, tried putting the script in the header using echo but then the script dose not work at all also tried using just php removing the Script tags that did not work been working on for a while any help would be greatly appreciated.
<?php
include("db_config.php");
include('includes/session.inc');
$Title = _('Check Inquiry');
$ViewTopic = 'AccountsPayable';
$BookMark = 'AccountsPayable';
include('includes/header.inc');
include('includes/SQL_CommonFunctions.inc');
echo '<link href="' . $RootPath . '/css/bootstrap.min.css" rel="stylesheet" type="text/css" />';
echo '<script src = "'.$RootPath.'/javascripts/jquery.min.js"></script>';
echo '<script type="text/javascript" src = "'.$RootPath.'/javascripts/bootstrap.min.js"></script>';
$query = "select * from banktrans where type=".'22';
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_array($result)){
$transID = $row['transno'];
echo "<tr>";
echo "<td><button data-id='".$transID."' class='btn btn-info btn-sm btn-popup'>Details</button></td>";
echo "</tr>";
}
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>
HTML;
include('includes/footer.inc');
?>

Answer 1

Yes it dose appear I added the HTML in a separate php file and it works but the closing tag ?> is still not working as expected normally it shows up in NP++ in red when closed but shows as normal text but does not appear on page I am just wondering if it will create any issues that way.
Here is the code for the include modal.php
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>";
HTML;
?>'''