如何从php传递数据以在javascript中对其进行初始化？

Question

I am trying to display some football fixtures but I am struggling with opening Modals. In each game from each week I want to open one modal where I should display more informations about the respective game. I need to initialize every modal by the time it is created. I don't know how to pass the modal data from the PHP to javascript. With the code below only Modals from 1-5 will work, the other will create an error when clicked.

PHP modal create

$i = 1;
$j = 1;
foreach ($games as $rounds) {
echo "<div id='et$i' class='tabcontent'>";
echo "<ul class='collection'>";

foreach ($rounds as $match) {
    echo "<li class='collection-item'>";
        echo "<div class='row'>";
        echo "<div class='center col s4'>{$match[1]}</div>";
        echo "<div class='center col s1'>-</div>";
        echo "<div class='center col s4'>{$match[0]}</div>";
        echo "<a href='#meci$j' class='secondary-content' onclick=\"$('#modal$j').modal('open');\"> <i class='material-icons'>assessment</i> </a>";
        echo "</div>";

        echo "<div id='modal$j' class='modal'>";
        echo "<div class='modal-content'>";
        echo "<div class='row'>";
        echo "<div class='center col s4'>$match[1]</div>";
        echo "<div class='center col s1'>-</div>";
        echo "<div class='center col s4'>$match[0]</div>";
        echo "</div>";

        echo "</div>";
        echo "</div>";
    echo "</li>";
    $j++;
}
echo "</ul>";
echo "</div>";
$i++;
}

Javascript initialization

$(document).ready(function() {
    $('#modal1').modal();
    $('#modal2').modal();
    $('#modal3').modal();
    $('#modal4').modal();
    $('#modal5').modal();
});

Answer 1

Since you've given all the modals the same class, you can use that to initialize them.

$(document).ready(function() {
    $(".modal").modal();
})