Popup box and content on each table row - php

Question

Original code
<tbody id="table">
#foreach($services as $service)
<tr>
<td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
#if($service->brand != '')
<span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
#endif
</td>
</tr>
<tr>
<th>#lang('general.package_id')</th>
<th>#lang('general.name')</th>
<th>#lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
<th>#lang('general.minimum_quantity')</th>
<th>#lang('general.maximum_quantity')</th>
<th>#lang('general.description')</th>
</tr>
#foreach($packages as $package)
#if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
<tr>
<td>{{ $package->id }}</td>
<td>{{ $package->name }}</td>
<td>
#php
$price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
#endphp
{{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
</td>
<td>{{ $package->minimum_quantity }}</td>
<td>{{ $package->maximum_quantity }}</td>
<td style="white-space: pre-line">{{ $package->description }}</td>
</tr>
#endif
#endforeach
#endforeach
</tbody>
I was trying to replace "{{ $package->description }}" with a button to show the content in a new popup, using this.
<tbody id="table">
#foreach($services as $service)
<tr>
<td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
#if($service->brand != '')
<span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
#endif
</td>
</tr>
<tr>
<th>#lang('general.package_id')</th>
<th>#lang('general.name')</th>
<th>#lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
<th>#lang('general.minimum_quantity')</th>
<th>#lang('general.maximum_quantity')</th>
<th>#lang('general.description')</th>
</tr>
#foreach($packages as $package)
#if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
<tr>
<td>{{ $package->id }}</td>
<td>{{ $package->name }}</td>
<td>
#php
$price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
#endphp
{{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
</td>
<td>{{ $package->minimum_quantity }}</td>
<td>{{ $package->maximum_quantity }}</td>
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">+ Description</button></td>
</tr>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="white-space: pre-line">{{ $package->description }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endif
#endforeach
#endforeach
</tbody>
But I'm getting same content on each button, but the content must be different because each row have won service name + description. This description must be different on the popup box.

Answer 1

The problem might be caused by your modal-ids. Since all your modals have the id "exampleModalCenter" your Button probably only opens the first one it can find (since ids are supposed to be unique).
If you would dynamicly change your modal-ID and the corresponding Button-target
Example with adding your package-ID:
<tbody id="table">
#foreach($services as $service)
<tr>
<td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
#if($service->brand != '')
<span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
#endif
</td>
</tr>
<tr>
<th>#lang('general.package_id')</th>
<th>#lang('general.name')</th>
<th>#lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
<th>#lang('general.minimum_quantity')</th>
<th>#lang('general.maximum_quantity')</th>
<th>#lang('general.description')</th>
</tr>
#foreach($packages as $package)
#if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
<tr>
<td>{{ $package->id }}</td>
<td>{{ $package->name }}</td>
<td>
#php
$price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
#endphp
{{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
</td>
<td>{{ $package->minimum_quantity }}</td>
<td>{{ $package->maximum_quantity }}</td>
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter-{{ $package->id }}">+ Description</button></td>
</tr>
<div class="modal fade" id="exampleModalCenter-{{ $package->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="white-space: pre-line">{{ $package->description }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endif
#endforeach
#endforeach
</tbody>