Formulaire via une boite modale dans une boucle

Bonjour,
je débute en Jquery, a propos e événement un sujet qui me chagrine depuis 2 jours. Je souhaite afficher un petit formulaire via une boite modal (sorte de poppup) sur un site pour demander l'mail du visiteur. Le problème, l'affichage va se faire via une boucle en provenance de mysql pour afficher les articles sur une page principale. Du coup, lorsque je clique sur mon bouton pour ouvrir le poppup, il y a autant des poppups qui s'affichent qu'il y ait des articles affichés, je me retouve des fois à 10, 20 poppups pour un seul click bouton. Tandis que je souhaite que l’événement se passe sur le bouton cliqué uniquement avec un seul poppup. Quelque peut m'apporter sa lumière. (excusez moi c'est mon premier post, je ne sais pas si je dois de m'étaler autant).

<?php foreach products as product; {?>
//Mon formulaire est pris dans un <td> ainsi :
  <div class="dialog" title="Créer votre listes des produits :">
  <form action="" method="post">
  <label>Ajouter à votre liste:</label><br/>
  <input type="text" name="NameListeCatProduit" id="NameListeCatProduit" />
  <input type="submit" class="submitListeCatProduit" value="Valider" />
  </form>
  </div>
  <input type="button" class="buttonListeCatProduit" value="Ajouter dans votre liste" />
<php }?>

//Puis mon jquery est ainsi :

$(document).ready(function() {
$(function() {
$(".dialog").dialog({
autoOpen: false
});
$(".buttonListeCatProduit").on("click", ".buttonListeCatProduit", function(e) {
$("e.dialog").dialog("open");
});
});
// Validating Form Fields.....
$(".submitListeCatProduit").click(function(e) {
var name = $(".NameListeCatProduit").val();
if ( name === '') {
alert("Please fill all fields...!!!!!!");
e.preventDefault();
} else {
alert("Form Submitted Successfully......");
}
});
});