Модальное окно Bootstrap не отображается при нажатии кнопки обновления с помощью jquery

Я использую jquery для обновления данных с помощью модального режима начальной загрузки, он не показывает модальный, я не знаю, почему

Это мой код для модального

<div id = "updateModal" class = "modal fade">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
            </div>    

            <div class = "modal-body">
                    <div class = "form-group">
                        <input type = "text" class = "form-control" id = "name" name = "name" placeholder = "Enter name" />
                    </div>
                    <div class = "form-group">
                        <input type = "text" class = "form-control" id = "email" name = "email" placeholder = "Enter email" />
                    </div>
                    <div class = "form-group">
                        <input type = "text" class = "form-control" id = "mob" name = "mob" placeholder = "Enter Mobile" />
                    </div>
                    <div class = "form-group">
                        <input type = "text" class = "form-control" id = "city" name = "city" placeholder = "Enter City" />
                    </div>

                <a href = "#" id = "save" class = "btn btn-success pull-right">Update</a>
            </div>

            <div class = "modal-footer">
                <button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
            </div>
            </div>
        </div>
    </div>

Это код jquery:

    $(document).ready(function(){
       $(document).on('click','a[data-role=update]',function(){
          var id = $(this).data(id);
           var name = $('#'+id).children('td[data-target=name]').text();
           var email = $('#'+id).children('td[data-target=email]').text();
           var mob = $('#'+id).children('td[data-target=mob]').text();
           var city = $('#'+id).children('td[data-target=city]').text();

           $('#name').val(name);
           $('#email').val(email);
           $('#mob').val(mob);
           $('#city').val(city);
           $('#updateModal').modal('toggle');
       });
    });

И это код для обновления списка лиц:

<div class = "table">
    <table class = "table table-bordered">
        <thead>
            <tr>
                <th>Sr. No.</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>City</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            <?php while($row = mysqli_fetch_array($query)): $count++;?>
            <tr id = "<?php echo $row['id'];?>">
                <td><?php echo $count;?></td>
                <td data-target = "name"><?php echo $row['name'];?></td>
                <td data-target = "email"><?php echo $row['email'];?></td>
                <td data-target = "mob"><?php echo $row['mob'];?></td>
                <td data-target = "city"><?php echo $row['city'];?></td>
                <td><a href = "#" class = "btn btn-success btn-sm" data-role = "update" data-id = "<?php echo $row['id'];?>">Update</a></td>
            </tr>
            <?php endwhile;?>
        </tbody>

    </table>
</div>

Написав до этого, я ожидаю, что модальное окно должно всплывать и отображать информацию в полях ввода, но пока я нажимаю кнопку обновления, модальное окно не появляется.

Любая помощь должна быть оценена.