How to create javascript function in laravel foreach loop

Question

I need some help about this code

I have some code in blade view

@foreach($cart as $ct)
<button type="button" id="edit{{$ct->id}}" class="btn-btn-delete">
        <i class="mr-1 fas fa-edit"></i>Edit
</button>
        //when I {{$ct->id}} at this point, it return id of current product         
<div class="form-popup" id="myForm{{$ct->id}}">
        //however, when I {{$ct->id}} at this point, it return id of the last product                      
    <form action="{{route('cart.update',$ct->id)}}" class="form-container" method="post">
            @csrf
            @method('patch')
           <h1>Edit information</h1>

           <input type="text" name="name" value="{{$ct->name}}">
          <button type="submit" class="btn">change</button>
          <button type="button" class="btn cancel" id="close{{$ct->id}}">Close</button>
     </form>
</div>

 <script>
     var ID = {{$ct->id}};
     var code = 'edit'+ID;
     var end = 'close'+ID;
     var form = 'myForm'+ID;
     document.getElementById(code).addEventListener("click",function(){
               document.getElementById(form).style.display = "block";
              });
     document.getElementById(end).addEventListener("click",function(){
               document.getElementById(form).style.display = "none";
              });
 </script>
@endforeach

when I run my code and click on Edit button the expected value in input field of each row must be different. However, it all gets the value of the last column in the database.

How I can fix it?

Answer 1

Following is approach using addEventListener() and classes to target elements as well as data attributes (like data-target="myForm1") for element specific data to use inside an event handler.

It is currently working for the "Edit" and "Cancel" buttons which have the same class popup-toggle along with their other existing classes.

You can use this approach as a template for your other elements/actions

// in DOMContentLoaded event handler or after elements exist

const popToggleButtons = document.querySelectorAll('.popup-toggle');

[].slice.call(popToggleButtons).forEach(function(btn) {
  btn.addEventListener('click', handleToggleBtnClick)
});


function handleToggleBtnClick(event) {
  const btnData = this.dataset,
    popup = document.getElementById(btnData.target),
    classMethod = btnData.action === 'show' ? 'add' : 'remove';
  // add or remove active class depending on which button was clicked
  popup.classList[classMethod]('active');

}

.form-popup {
  display: none
}

.form-popup.active {
  display: block
}

<div>
  <button type="button" data-target="myForm1" data-action="show" class="popup-toggle btn-btn-delete">
        <i class="mr-1 fas fa-edit"></i>Edit #1
</button>
  <div class="form-popup" id="myForm1">
    <form action="..." class="form-container" method="post">
      <h1>Edit information #1</h1>
      <input type="text" name="name" value="name 1">
      <button type="submit" class="btn">change</button>
      <button type="button" class="btn cancel popup-toggle" data-target="myForm1" data-action="hide">Close</button>
    </form>
  </div>
</div>
<div>
  <button type="button" data-target="myForm2" data-action="show" class="popup-toggle">
        <i class="mr-1 fas fa-edit"></i>Edit #2
</button>

  <div class="form-popup" id="myForm2">
    <form action="..." class="form-container" method="post">
      <h1>Edit information #2</h1>
      <input type="text" name="name" value="name 2">
      <button type="submit" class="btn">change</button>
      <button type="button" class="btn cancel popup-toggle" data-target="myForm2" data-action="hide">Close</button>
    </form>
  </div>
</div>