Is not deleting from bootstrap modal

Question

as you can see these code, the deleting button inside of pagination works fine without bootstrap modal, and then convert to bootstrap model, the bootstrap model is working fine once click the delete button, but the problem is not deleting it or do nothing. I can't figure out what I missing, I could be id number or jquery, I need help badly.

Foreach

              <thead>
              <tr class="center">
                <th>ID</th>
                <th>Account ID</th>
                <th>Password</th>
                <th>Company Name</th>
                <th>Restocking Fee</th>
                <th>Status</th>
                <th>Action</th>
              </tr>
              </thead>
              <tbody>
                @foreach($resellers as $reseller)
              <tr>
                <td>{{ $reseller-> id }}</td>
                <td>{{ $reseller-> accountid }}</td>
                <td>{{ $reseller-> password }}</td>
                <td>{{ $reseller-> companyname }}</td>
                <td>{{ $reseller-> restockingfee }}</td>
                <td>{{ $reseller-> active}}</td>
                <td class="center">

                    <form action="{{ url('/admin/resellers', $reseller->id) }}" method="POST">
                    <strong><a href="/admin/resellers/{{ $reseller->id }}" class="btn btn-primary btn-sm btn-mini" >
                        <i class="fas fa-pen fa-fw"></i>View</a></strong>
                    @method('DELETE')
                    @csrf
                    <button class="btn btn-secondary btn-sm btn-mini"><i class="far fa-edit fa-fw"></i>Edit


<a href="#" style="color:black; font-weight: bold;" data-href="{{ url('/admin/resellers/{reseller}', $reseller->id) }}"
     class="btn btn-info btn-outline btn-circle btn-lg" data-toggle="modal" data-target="#myModal" title="Delete">Delete</a>
                </form>

                </td>
              </tr>

                @endforeach
              </tbody>

              <tfoot>
              <tr>
                <th>ID</th>
                <th>Account ID</th>
                <th>Password</th>
                <th>Company Name</th>
                <th>Restocking Fee</th>
                <th>Status</th>
                <th>Action</th>
              </tr>
              </tfoot>
            </table>
          </div>

modal

<!-- Delete Modal -->
<div class="container">
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Delete !!!</h4>
          </div>
          <div class="modal-body text-center">
            <p class="my-0 font-weight-bold">Are you sure you want to delete this data???</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <a class="btn btn-danger btn-ok">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>

jquery

<script>
  $('#myModal').on('show.bs.modal', function(e) {
      $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
  });
</script>

controller

   public function destory(\App\Reseller $reseller){

        $reseller -> delete();

        return redirect ('/admin/resellers');
    }

Answer 1

On your blade, do this outside the form (not in form) :

@foreach($resellers as $reseller)
  <tr>
    <td>{{ $reseller->id }}</td>
    <td>{{ $reseller->accountid }}</td>
    <td>{{ $reseller->password }}</td>
    <td>{{ $reseller->companyname }}</td>
    <td>{{ $reseller->restockingfee }}</td>
    <td>{{ $reseller->active}}</td>
    <td class="center">

      <a href="#" style="color:black; font-weight: bold;" data-href="{{ url('/admin/resellers/', $reseller->id) }}" class="btn btn-info btn-outline btn-circle btn-lg" data-toggle="modal" data-target="#myModal" title="Delete">Delete</a>

    </td>
  </tr>
@endforeach

This is the modal data :

<!-- Delete Modal -->
<div class="container">
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Delete !!!</h4>
        </div>
        <div class="modal-body text-center">
          <p class="my-0 font-weight-bold">Are you sure you want to delete this data???</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <a class="btn btn-danger btn-ok">Delete</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Delete Modal JS -->
<script>
  $('#myModal').on('show.bs.modal', function(e) {
      $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
  });
</script>