Как создать функцию javascript в цикле foreach laravel

Question

Мне нужна помощь по этому коду

У меня есть некоторый код в режиме блэйда

@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

, когда я запускаю свой код и нажимаю кнопку Edit ожидаемое значение в input поля каждой строки должны быть разными. Тем не менее, все это получает значение последнего столбца в базе данных.

Как я могу это исправить?

Answer 1

Далее следует подход, использующий addEventListener() и классы для целевых элементов, а также атрибуты данных (например, data-target="myForm1") для специфических данных элемента для использования внутри обработчика событий.

Itв настоящее время работает для кнопок «Редактировать» и «Отмена», которые имеют тот же класс popup-toggle вместе с другими существующими классами.

Вы можете использовать этот подход в качестве шаблона для других элементов / действий

// 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>