Тег <dialog> или модальное окно

[kuzmich]

всем привет!

есть раздел с продукцией, продукция берется из базы.
нужно сделать, чтобы при нажатии на продукцию выходило модальное окно с описанием.

сделал таким образом:

		do
        {
        echo "
<dialog>
    <div style='text-align:right;'><button id='close".$product_db_row['id']."'><strong>X</strong></button></div>
    <div>".$product_db_row['about']."</div>
</dialog>

<button id='open".$product_db_row['id']."' class='product'>
    <div class='product_image'><img src='".$product_db_row['image']."'></div>
    <div class='product_title'><strong>".$product_db_row['title']."</strong></div>
    <div class='product_about'>".strip_tags(substr($product_db_row['about'],0,300))." ...</div>
</button>

 
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#open".$product_db_row['id']."').onclick = function() {
  dialog.showModal(); // открыть модальное диалоговое окно
};
 
document.querySelector('#close".$product_db_row['id']."').onclick = function() {
  dialog.close(); // закрыть диалоговое окно
};</script>     ";
        }
        while ($product_db_row = mysql_fetch_array($product_db));

в каждом разделе у меня от одной продукции и выше, смотря какая продукция. так вот проблема в том, что если в одном разделе более одной продукции и нажимаю на любую из них - то выходит описание первой продукции. подскажите люди добрые - может кто сталкивался с данной проблемой.
заранее благодарю.

[Gorychev]

в цикле выводить список продуктов, это же очевидно.
вы бы хоть не выводили в echo html и js, страшно читать же...

по этому куску не совсем понято как у вас там