循环遍历产品以显示其自身的各个属性

Question

I have a laravel shopping cart application and trying to implement a more info button where it shows a modal popup with product description in it. I'm using a foreach loop to get the items and outputs the more info button within the loop. The description doesn't change for the next product it remains as description from the first product. I want each item to display it's own description.

View:

@extends('Layout.master')

@section('content')

<h2>Video Games</h2>

<hr>
@foreach($products->chunk(4) as $productChunk)

   @foreach ($productChunk as $product)

<article class="product">

    <div class="productHeader">

        <img src="{{$product->imagePath}}" id="product-img" alt="" class="img-responsive"  />
        <br/>
        <h5>{{$product->title}}</h5>

 <h5>{{$product->format}}</h5>

    </div>

    <div class="productContent">

  <p class="lead"> &pound;{{$product->price}}</p>

          <a class="btn btn-primary pull-right btn-block" data-toggle="modal" data-target="#myModal" href="{{ URL::to('', $product->id)}}">More Info</a>

      <a class="btn btn-success pull-right btn-block" href="{{ route('product.addToCart', ['id' => $product->id])}}">Add to cart</a>

    </div>

</article>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="background-color:#CCD1D1;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-center">Description</h4>
      </div>

      <div class="modal-body">
        <p> {{$product->description}}</p>
      </div>
      <div class="modal-footer" style="background-color:#CCD1D1;">
        <button type="button" style="background-color: #1B4F72; color:#fff;" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

@endforeach

@endforeach


@endsection

Answer 1

You need to set an unique ID for each link that opens modal:

data-target="#myModal{{ $product->id }}" ....

And for a modal itself:

<div id="myModal{{ $product->id }}" ....