Have Bootstrap Modal open after Ajax loads data

I'm working on a project and have a modal in the view. I'm using ajax to load data from the controller but when I click on the button, the modal loads and then the data loads in side the modal.

When I put this at the end of the ajax call to load the modal, it gives me this error. Uncaught TypeError: $(...).modal is not a function

Here's the a link to click to start the process...

<a  class="open-pracavailable btn btn-primary" data-toggle="modal"  href="#pracavailable" data-id={{$ScheduledDuty->id }}  data-pracdutyid= {{$ScheduledDuty->PRACDutyID }} >...</a>

Modal - in the view

<div class="modal hide" id="pracavailable" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">    
                <div class="modal-header">
                        <h3 class="modal-title">Available Practitioners</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                        </button>
            </div>
            <div class="modal-body">
            
            
            </div>
            <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
  </div>

Ajax

$(document).on("click", ".open-pracavailable", function () {
            var serviceid = $(this).data('id');
            var pracdutyid = $(this).data('pracdutyid');
            $('.modal-content .modal-body').empty()
            console.log(serviceid, pracdutyid);

            $.ajax({
                type: 'get',
                url: '/serviceweeks/pracavailableajax',
                data: {serviceid:serviceid},
                dataType: 'json',
                success: function (data) {
                    console.log(data);
               
                    var datalength = 10;
                    
                    var html="";
                    html += '<table class="table table-bordered" >';
                    for(var count=0; count < datalength; count++){
                        html += '<tr>';
                        html += '<td>'+data.data[count].id+'-'+data.data[count].FirstName+'</td>';  
                        html += '</tr>';
                    }
                    html += '</table>';      
                    
                    $('.modal-content .modal-body').append(html) 
                   
                    $('#pracavailable').modal('show');
                   
                },
                    error: function (data) {
                     console.log('Error:', data);
                }
      
            }); 

I have read several mentions about loading bootstrap js first and the javascript....

Here's my header script load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    

    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

footer load

<script src="http://localhost:82/js/jquery.menu-aim.js"></script>
<script src="http://localhost:82/js/main.js"></script> <!-- Resource jQuery -->

Any help would be appreciated.