If you require more information, feel free to ask. Thanks in advance. In Laravel 8, I have a button named "create app". When I click on it, it takes me to a page where I can add some data. After adding the data, it displays many apps in a list view. Each item in the list has an animated kebab menu. However, the issue is that when I create a new app, the dropdown menu only works for the last entered app. This means that if I create 10 apps, the dropdown menu will only work for the most recent one and not for the other nine.
Below is some code from my index.blade.php file that creates multiple kebab menus but does not function as a dropdown:
@foreach ($products as $product)
<div class="col-xs-12 col-sm-12 col-md-12">
<form action="{{ route('products.destroy', $product->id) }}" method="POST">
<a class="btn btn-outline-info" href="{{ route('products.edit', $product->id) }}">
<br>
<img src="/logo/{{ $product->logo }}" width="100px" class="col-4">
<div class="col-2" style="color: #1d2124">
<strong >App Name:- {{ $product->name }}</strong>
<br>
<strong>App Id:- {{ $product->id }}</strong>
</div>
</a>
<div class="pull-right">
<div class="kebab">
<figure></figure>
<figure class="middle"></figure>
<p class="cross">x</p>
<figure></figure>
<ul class="dropdown">
@csrf
@method('DELETE')
<li><button type="submit" class="btn btn-danger">Delete</button></li>
<li><a href="api/json_link">All Json</a></li>
<li><a href="api/SearchById">JsonById</a></li>
<li><a href="api/SearchByName">JsonByName</a></li>
</ul>
</div>
</div>
</form>
</div>
@endforeach
Here is the JavaScript code from app.js which creates kebab menus for all apps but dropdown functionality only for the last inserted app:
require('./bootstrap');
require('alpinejs');
var kebab = document.querySelector(".kebab"),
middle = document.querySelector(".middle"),
cross = document.querySelector(".cross"),
dropdown = document.querySelector(".dropdown");
kebab.addEventListener("click", function() {
middle.classList.toggle("active");
cross.classList.toggle("active");
dropdown.classList.toggle("active");
});