title: Bootstrap modal won't show up in laravel project
body: <p>I'm trying to summon a modal window as a confirm delete for products/categories/users/pages admin can add and edit. However the window isn't showing up.
  This is one of the pages the modal should show up in:</p>
  <pre><code>@extends('admin.atemplate')
  @section('admin-content')
  
  &lt;h1&gt; Categories &lt;/h1&gt;
  &lt;a class=&quot;btn btn-primary float-right mb-3&quot; href=&quot;{{url('admin/categories/create')}}&quot;&gt; Add new category&lt;/a&gt;
  @if($categories-&gt;isEmpty())
  &lt;p&gt; There are no categories&lt;/p&gt;
  @else
  &lt;div class=&quot;table-responsive&quot;&gt;
      &lt;table class=&quot;table table-hover table-dark&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th scope=&quot;col&quot;&gt;Image&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt;Slug&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach($categories as $category)
              &lt;tr&gt;
                  &lt;th scope=&quot;row&quot;&gt;
                      &lt;img class=&quot;admin-thumbnail&quot; src=&quot;{{asset('storage/' . $category-&gt;image)}}&quot; alt=&quot;{{$category-&gt;name}}&quot;&gt;
                  &lt;/th&gt;
                  &lt;td class=&quot;align-middle&quot;&gt; {{$category-&gt;name}} &lt;/td&gt;
                  &lt;td class=&quot;align-middle&quot;&gt; {{$category-&gt;slug}} &lt;/td&gt;
                  &lt;td class=&quot;align-middle&quot;&gt;
                      &lt;a href=&quot;{{url('admin/categories/' . $category-&gt;id . '/edit')}}&quot;&gt;
                          &lt;svg width=&quot;1em&quot; height=&quot;1em&quot; viewBox=&quot;0 0 16 16&quot; class=&quot;bi bi-chevron-double-up&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z&quot;/&gt;
                              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z&quot;/&gt;
                          &lt;/svg&gt;
                      &lt;/a&gt;
                      **&lt;a class=&quot;open-modal&quot; data-id=&quot;{{$category-&gt;id}}&quot; href=&quot;&quot; data-toggle=&quot;modal&quot; data-target=&quot;#confirmModal&quot;&gt;
                          &lt;svg width=&quot;1em&quot; height=&quot;1em&quot; viewBox=&quot;0 0 16 16&quot; class=&quot;bi bi-trash&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                              &lt;path d=&quot;M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z&quot;/&gt;
                              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z&quot;/&gt;
                          &lt;/svg&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              @endforeach
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;!-- Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;confirmModal&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt; WAIT &lt;/h5&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                      &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  Are you SURE you want to delete this?
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt; I changed my mind &lt;/button&gt;
                  &lt;form id=&quot;delete-form&quot; method=&quot;post&quot; data-route=&quot;{{url('admin/categories/')}}&quot; action=&quot;&quot;&gt;
                      @csrf
                      @method('DELETE')
                      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt; Yes &lt;/button&gt;
                  &lt;/form&gt;                
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;**
  @endif
  @endsection
  </code></pre>
  <p>(added ** to show where the modal starts)</p>
  <p>here is the javascript:</p>
  <pre><code>'use strict';
  $(function() {
      $('.minus').click(function () {
          var $input = $(this).parent().find('input');
          var count = parseInt($input.val()) - 1;
          count = count &lt; 1 ? 1 : count;
          $input.val(count);
          $input.change();
          return false;
      });
      $('.plus').click(function () {
          var $input = $(this).parent().find('input');
          $input.val(parseInt($input.val()) + 1);
          $input.change();
          return false;
      });
      $('a.add-to-cart').on('click', function(e){
          e.preventDefault();
          var that = $(this);
          var url = that.attr('href');
      $.ajax({
          url: url,
          method: 'get',
          success:function (response){
              if (Number(response)){
                  $('#mini-cart span').text(response);
                  $('#alert').slideDown().removeClass().addClass('alert alert-success').text('Product was added!');
              }else{
                  $('#alert').slideDown().removeClass().addClass('alert alert-danger').text('Action could not be completed!');
              }
          }
          }).fail(function(){
              $('#alert').slideDown().removeClass().addClass('alert alert-danger').text('Action could not be completed!');
          }).always(function(){
              window.setTimeout(function(){
                  $('#alert').slideUp();    
              }, 3000);  
              });
          });
      $('#add-to-cart').on('submit', function(e){
          e.preventDefualt();
          var that = $(this);
              url = that.attr('action'),
              data = that.serialize();
          
      $.post(url, data, function(response){
          if (Number(response)){
              $('#mini-cart span').text(response);
              $('#alert').slideDown().removeClass().addClass('alert alert-success').text('Product was added!');
          }else{
              $('#alert').slideDown().removeClass().addClass('alert alert-danger').text('Action could not be completed!');
          }
      }).fail(function(){
          $('#alert').slideDown().removeClass().addClass('alert alert-danger').text('Action could not be completed!');
      }).always(function(){
                  window.setTimeOut(function(){
                  $('#alert').slideUp();    
                  }, 3000);
              });
          });
      $('product-quantity').on('change', debounce (function (){
          var that = $(this),    
              parent = that.parents('.update-cart');
              url = parent.attr('action'),
              data = parent.serialize();
          
      $.post(url, data, function(response){
          //JSON.pharse(response);
          if (Number(response.cart_count)){
              $('#mini-cart span').text(response.cart_count);
              $('#alert').slideDown().removeClass().addClass('alert alert-success').text('Cart was updated!');
              that.parents ('tR').find('.product-total').text(response.product_total);
              $('.cart-total').text(response.cart_total);
      
      } else {
              $('#alert').slideDown().removeClass().addClass('alert alert-danger').text('Action could not be completed!');
          }
      }, 'json').fail(function(){
          $('#alert').slideDown().removeClass().addClass('alert alert-danger').text('Action could not be completed!');
      }).always(function(){
                  window.setTimeOut(function(){
                  $('#alert').slideUp();    
                  }, 3000);
          });
      }, 500));
      
      $('a.delete-product').on('click', function(){
          return confirm('Are you sure you want to remove this item?')
      });
      $('a.delete-cart').on('click', function(){
          return confirm('Are you sure you want to empty your cart?')
      });
      $('.open-modal').on('click', function(){
          var that = $(this),
              id = that.data('id'),
              name = that.data('name'),
              form = $('#delete-form'),
              route = form.data('route');
  
              form.attr('action', route + '/' + id);
              $('#confirmModal .modal-body').text('Are you sure you want to delete ' + name)
          });
      });    
      function debounce(func, wait, immediate) {
      var timeout;
      return function() {
          var context = this, args = arguments;
          var later = function() {
              timeout = null;
              if (!immediate) func.apply(context, args);
          };
          var callNow = immediate &amp;&amp; !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
      };
  };
  </code></pre>
  <p>Jquery and JavaScript are added at the bottom of a template file, and other functions in script are working so it doesn't seem like a placement problem.</p>