Queryselector removing wrong item

I’m working on an e-commerce site, and I’m trying to implement a delete button. Currently, the delete button is not working correctly, sometimes I have to double-click for it to work, and when it does it doesn’t remove the selected product. It seems to delete a product based on when it was added i.e oldest added product to latest.

The delete button kinda works, it doesn’t remove the selected product, instead, it the deletes product based on the oldest added to the newly added. does someone know?

 <div class="table-responsive-sm">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Picture</th>
        <th scope="col">Title</th>
        <th scope="col">Brand</th>
        <th scope="col">size</th>
        <th scope="col">Price</th>
        <th scope="col">Actions</th>
      </tr>
    </thead><% if (products.length> 0) { %><% products.forEach(product=> { %> <tbody id="table-body">
      <tr>
        <td>
          <img src="/uploads/resized/<%= product.picture%>" style="width: 10%; height: auto;">
        </td>
        <!--move style to css later //Karwan-->
        <td class="table-title">
          <p><%= product.title %> </p>
        </td>
        <td>
          <p><%= product.brand %> </p>
        </td>
        <td>
          <p><%= product.size %> </p>
        </td>
        <td>
          <p><%= product.price %> </p>
        </td>
        <td>
          <div class="px-2 mt-3">
            <!--Modal pop up to delete a  product -->
            <a class="single" data-toggle="modal" data-target="#deleteProduct">
              <!--make sure these are correct -->
              <button class="btn btn-form-productt" type="submit">Delete</button>
              <!--add icon-->
            </a>
            <!--Delete product modal-->
            <div class="modal fade" id="deleteProduct">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Click on delete to confirm your deletion</h5>
                    <!--Delete btn -->
                    <a class="single">
                      <button class="btn btn-form-productt">
                        <a class="delete" data-doc="<%= product._id %>">
                          <i class="fa-solid fa-trash"></i>
                        </a>
                      </button>
                    </a>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </td><% }) %><% } else { %> <p>There are no products to display...</p><% } %>
      </tr>
    </tbody>
  </table>
</div>

// Javascript code

         <script>
 //Delete product
 const trashcan = document.querySelectorAll('a.delete');
 trashcan.forEach(function(el) {
   el.addEventListener('click', function() {
     const endpoint = `/shop/delete/${el.dataset.doc}`;
     fetch(endpoint, {
       method: 'DELETE',
     }).then(response => response.json()).then((data) => window.location.href = data.redirect).catch(err => console.log(err));
   })
 })
  </script>