Open different modal-diaglog with foreach()

Question

I'am trying to implement a modal that shows always different information. This depends on the name you click. At this moment he always shows the modal of the latest link.

Here I'm printing out the different information. For each line i want a specific modal

PHP

foreach ($badgesNotifications as $notifications) {

  echo "<p>Congratulations! You've earned the <a href='#' data-reveal-id='myModal'>" .  $notifications['challenge_badge_title'] ." badge</a></p>";
  echo "<div id='myModal' class='reveal-modal' data-reveal>
          <h2>" .  $notifications['challenge_title'] . "</h2>
          <p class='lead'>Your couch.  It is mine.</p>
          <p>" . $notifications['challenge_description'] . " </p>
          <a class='close-reveal-modal'>&#215;</a>
       </div>";
}
?>

I tried to replace 'myModal' with $notifications['challenge_badge_title'] in the link and the id of the mail but then he isn't opening the modal.

The title is always different so I thought he would open an other window. The id don't have to be necessary "MyModal" because it's working with other words to.

I also tried to put the data in different arrays because they are overwriting each other. But also that won't fix my problem.

public function BadgeNotifications($user_id)
    {
        $db = new Db();

        $select = "SELECT

                            c.challenge_id,
                            c.challenge_title,
                            c.challenge_target,
                            c.challenge_description,
                            c.challenge_badge_img,
                            c.challenge_badge_title,
                            p.challenge_id,
                            p.user_id,
                            p.challenge_progress


                        FROM (tblchallenges c INNER JOIN tblchallenges_progress p ON c.challenge_id = p.challenge_id) WHERE p.user_id = " . $user_id . " ";


    $result = $db->conn->query($select);
        $result_count = mysqli_num_rows($result);
        $result_array = array();


        for($i = 0; $i < $result_count; $i++)
            {
                $result_data = mysqli_fetch_assoc($result);
                $result_array[$i]["challenge_id"] = $result_data["challenge_id"];
                $result_array[$i]["challenge_title"] = $result_data["challenge_title"];
                $result_array[$i]["challenge_description"] = $result_data["challenge_description"];
                $result_array[$i]["challenge_badge_title"] = $result_data["challenge_badge_title"];
            }
        return $result_array;

    }

Answer 1

It looks like there's an error here with your code:

echo "<div id='myModal' class='reveal-modal' data-reveal>";

You should perhaps give each modal a unique ID. Properly written Javascript applications fall over when ID's are used more than once as the CSS/JS specification says that you may only use an ID once.

My solution below introduces an iterator $i which you can use to make each echoed element unique.

You will notice that the modal ID now has a number at the end of it, (myModal0, myModal1, etc.).

foreach ($badgesNotifications as $i => $notifications)
                            {

                                  echo "<p>Congratulations! You've earned the <a href='#' data-reveal-id='myModa" . $i . "l'>" .  $notifications['challenge_badge_title'] ." badge</a></p>";

                                  echo "<div id='myModal" . $i . "' class='reveal-modal' data-reveal>
                                        <h2>" .  $notifications['challenge_title'] . "</h2>
                                         <p class='lead'>Your couch.  It is mine.</p>
                                         <p>" . $notifications['challenge_description'] . " </p>
                                          <a class='close-reveal-modal'>&#215;</a>

                                        </div>";
                            }

                            ?>