How to display a modal window for a specific product?

Question

Laravel

The site has several products, the purchase of each occurs through a modal window. The bottom line is that when a modal is displayed via foreach(), modal windows of all products are displayed, but you need a specific one, the button of which was clicked. Because when buying using Ajax, an error occurs that is related to duplicates.
PS I know that they don’t output through foreach, there was just a collective farm method that needs to be removed

Found 2 elements with non-unique id #id:
<input type=​"hidden" name=​"id" id=​"id" value=​"1">​ 
<input type=​"hidden" name=​"id" id=​"id" value=​"2">​

@foreach($category_packages as $cp)
<div class="modal fade pack-modal" id="show_{{$cp->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="modal-body">
        <div class="modal-left-side">
          <div class="pack-wrapper">
            <div class="pack pack-start" style="background: linear-gradient(180deg, rgba(53, 68, 90, 0.24) 0%, rgba(54, 69, 91, 0.47) 100%);box-shadow: -25px 25px 60px rgba(14, 57, 96, 0.35);">
              <img src="/main/img/packs/{{$cp->image}}" class="pack-img" />
              <p class="pack-title">Пакет <span class="pack-color">«{{$cp->title}}»</span></p>
            </div>
          </div>

          <ul class="pack-description">
            {!! $cp->content !!}
          </ul>

        </div>
        <div class="modal-right-side">
          <h3 class="block-title">Введите данные для входа</h3>
          <form class="account-info" action="#" id="buyForm">
            @csrf
            <input type="hidden" name="id" id="id" value="{{$cp->id}}">
            <div class="form-group">
              <label><p>Логин</p>
                <input type="email" name="acc_login" id="acc_login" class="default-input" placeholder="Почта для входа" value="{{ old('email') }}">
              </label>
            </div>
            <div class="form-group">
              <label><p>Пароль</p>
                <input type="password" name="acc_pass" id="acc_pass" class="default-input" placeholder="*********">
              </label>
            </div>
            <p><b>Итого к оплате: <span class="gold-text">{{$cp->price}} руб.</span></b></p>
            <button type="submit" class="button success-button" disabled style="width:100%" id="subBuy">Оплатить</button>
            <div class="form-group accept-terms">
              <label>
                <input type="checkbox" required class="terms-accept">Я соглашаюсь с условиями пользовательского соглашения.
              </label>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endforeach

jQuery.ajax({
      url: "/buy/package/" + id,
      method: 'post',
      data: $("#buyForm").serialize(),
      success: function(data){

        $.notify({
          title: "<p><strong>Успешно!</strong></p>",
          message: data.message,
        }, {
          type: data.type,
        });

      },
      error: function(data){

        $.notify({
          title: "<p><strong>Ошибка!</strong></p>",
          message: data.message,
        }, {
          type: data.type,
        });

      }
    });

Answer 1

<input type="hidden" name="id" id="id_{{$cp->id}}" value="{{$cp->id}}">