Styjun

I am trying to show a model but the model.show is not working. I have seen a similar problem asked here but I was not able to solve my issue.
my html code:

<table class="table table-bordered" id="mytable">
 <thead class="thead-dark">
 <tr>
 <th scope="col">#</th>
 <th scope="col">Username</th>
 <th scope="col">Location</th>
 <th scope="col">House Number</th>
 <th scope="col" >Action</th>
 </tr>
 </thead>
 <% var c=0; for(var i=0; i < data.length; i++) c++; %>
 <tbody>
 <tr>
 <th scope="row"><%= c %></th>
 <td><%= data[i].user_name %></td>
 <td><%= data[i].location %></td>
 <td><%= data[i].house_number %></td> 
 <td>
 <a href="#" class="btn btn-success" >Edit</a>
 <!-- <a href="javascript:void(0);" id="myDelete" data-toggle="modal" data-target="#myDeleteModal" class="btn btn-sm btn-danger myDelete" data-userid="<%= data[i].user_id %>">
 <%= data[i].user_id %>Delete
 </a> -->
 <a href="javascript:void(0);" class="btn btn-sm btn-danger delete" data-id="<%= data[i].user_id %>">Delete</a>
 </td>
 </tr>
 </tbody>
 <% %>
 </table>

my model

<!-- Delete Product Modal-->
 <form id="add-row-form" action="/delete" method="post">
 <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="myModalLabel">Delete Product</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 </div>
 <div class="modal-body">
 <strong>Are You Sure To Delete This Data?</strong>
 </div>
 <div class="modal-footer">
 <input name="product_id" class="form-control product_id2" required>
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="submit" class="btn btn-success">Delete</button>
 </div>
 </div>
 </div>
 </div>
 </form>

my scripts.

<script src="bower_components/vendors/jquery/dist/jquery.min.js"></script>
 <script src="bower_components/vendors/popper.js/dist/umd/popper.min.js"></script>
 <script src="bower_components/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="bower_components/assets/js/main.js"></script>


 <script src="bower_components/vendors/chart.js/dist/Chart.bundle.min.js"></script>
 <script src="bower_components/assets/js/dashboard.js"></script>
 jquery
 <script src="bower_components/jquery/dist/jquery.min.js"></script>
 <!-- Vue -->
 <script src="bower_components/assets/js/Vue.js"></script>
 <!-- custom myscript.js -->
 <script src="bower_components/assets/js/myscript.js"></script>
 <script src="bower_components/assets/js/widgets.js"></script>
 <script src="bower_components/vendors/jqvmap/dist/jquery.vmap.min.js"></script>
 <script src="bower_components/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
 <script src="bower_components/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
 <script>
 (function($) 
 "use strict";

 jQuery('#vmap').vectorMap(
 map: 'world_en',
 backgroundColor: null,
 color: '#ffffff',
 hoverOpacity: 0.7,
 selectedColor: '#1de9b6',
 enableZoom: true,
 showTooltip: true,
 values: sample_data,
 scaleColors: ['#1de9b6', '#03a9f5'],
 normalizeFunction: 'polynomial'
 );
 )(jQuery);
 </script>
<script>
 $(document).ready(function()
 //showing data to modal for edit record
 $('#mytable').on('click','.edit',function()
 var product_id = $(this).data('id');
 var product_name = $(this).data('product_name');
 var product_price = $(this).data('product_price');
 $('#EditModal').modal('show');
 $('.product_name').val(product_name);
 $('.price').val(product_price);
 $('.product_id').val(product_id);
 );
 //showing modal for delete record
 $('#mytable').on('click','.delete',function()
 $(this).hide();
 var product_id = $(this).data('id');
 $('#DeleteModal').modal('show');
 $('.product_id2').val(product_id);
 );

 );
 </script>

im not sure if its because of the the conflicting licks to jquerys as pointed by some people in similar question or maybe doing somewhere wrong.

Your selector is wrong, try setting it this way:

$(document).ready(function()
 //showing data to modal for edit record
 $('#mytable .edit').on('click', function()
 var product_id = $(this).data('id');
 var product_name = $(this).data('product_name');
 var product_price = $(this).data('product_price');
 $('#EditModal').modal('show');
 $('.product_name').val(product_name);
 $('.price').val(product_price);
 $('.product_id').val(product_id);
 );
 //showing modal for delete record
 $('#mytable .delete').on('click',function()
 $(this).hide();
 var product_id = $(this).data('id');
 $('#DeleteModal').modal('show');
 $('.product_id2').val(product_id);
 );

);