javascript - All modals show the same content when triggered via a button click

Question

Every time the user clicks on a button a modal is triggered, however no matter which circle (button) the user clicks on - all modals display the content of the first circle. How can I get each modal to only display the content of the circle that the user has clicked on?

My Code:

<?php
require_once 'Net/SSH2.php';
require_once 'phpseclib1.0.10/Crypt/RSA.php';
$config = require 'config.json';
$log = 'logfile.txt';

if(is_array($config)){
  foreach($config as $cred){
    $ssh = new Net_SSH2($cred['ip'], $cred['port']);
    $key = new Crypt_RSA();
    $key->loadKey($cred['key']);

    echo ($cred['name']); //get Raspberry PI name from config file

    if (!$ssh->login('pi', $key)){
        file_put_contents($log, "[".date('Y-m-d H:i:s')."]Login Failed for {$cred['ip']}
", FILE_APPEND|LOCK_EX);
        continue;
    }

   $output = $ssh->exec('tail -1 /var/log/playlog.csv');
   $array = explode (',' , $output);

   if (end($array) >= 0){
   //trigger modal with button
   echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

   //modal
   echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">';
   echo '<div class="modal-dialog" role="document"';

   //modal content
   echo '<div class="modal-content">';
   echo '<div class="modal-header">';

   echo '<h4 class="modal-title" id="exampleModalLabel">Location: '.($cred['name']).'</h4>';
   echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
   echo '<span aria-hidden="true">&times;</span>';
   echo '</button>';
   echo '</div>';
   echo '<div class="modal-body">';
   echo '<p>No issues currently reported.</p>';
   echo '<p>Currently Playing: '.$array[1].'</p>';
   echo '</div>';
   echo '<div class="modal-footer">';
   echo '</div>';
   echo '</div>';
   echo '</div>';
   echo '</div>';
   echo '</div>';
   }else{
   echo '<div id="circleRed" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';
   //echo '<p>Issues: '.$array[2].'</p>';
   };
   }};

?>

Answer 1

Instead of something like this

...
if (end($array) >= 0){
//trigger modal with button
echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

//modal
echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">';
echo '<div class="modal-dialog" role="document"';

//modal content
echo '<div class="modal-content">';
echo '<div class="modal-header">';

echo '<h4 class="modal-title" id="exampleModalLabel">Location: '.($cred['name']).'</h4>';
echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
...

I recommend this

...
if (end($array) >= 0) { ?>
<!-- trigger modal with button -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>

  <!-- modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">
    <div class="modal-dialog" role="document"

    <!-- modal content -->
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title" id="exampleModalLabel">Location: <?= $cred['name']; ?></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
...

And so on.

Now to your question. Of course it opens the same modal, because you create a couple of modals with the same id.

YOU SHOULD NEVER DO THAT!!

Here is a quick fix:

Change this line foreach($config as $cred){ to this foreach($config as $key => $cred){

And then change this

echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel" aria="hidden">';

...

echo '<h4 class="modal-title" id="exampleModalLabel">Location: '.($cred['name']).'</h4>';

...

echo '<div id="circleRed" class="btn btn-primary" data-toggle="modal" data-target="#myModal"></div>';

to this

echo '<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal' . $key . '"></div>';

echo '<div class="modal fade" id="myModal' . $key . '" tabindex="-1" role="dialog" aria-labeledby="exampleModalLabel' . $key . '" aria="hidden">';

...

echo '<h4 class="modal-title" id="exampleModalLabel' . $key . '">Location: '.($cred['name']).'</h4>';

...

echo '<div id="circleRed" class="btn btn-primary" data-toggle="modal" data-target="#myModal' . $key . '"></div>';