Déclancher une action sur un index dans un formulaire

<form class="uk-form" method="post" action="" id="panier" name="panier">
                        <table class="uk-table">
                            <tr>
                                <th class="uk-text-center">Vignette</th>
                                <th class="uk-text-center">Index Photo</th>
                                <th class="uk-text-center">Référence Photo</th>
                                <th class="uk-text-center">Quantité </th>
                                <th class="uk-text-center">Prix Unitaire </th>
                                <th class="uk-text-center">Prix Total</th>
                            </tr>
<?php
                            $nbArticles=count($_SESSION['panier']['libelleProduit']);
       
                            if ($nbArticles <= 0)
                                {
                                //echo "<tr><td>Votre panier est vide </ td></tr>";
                                } 
                                else
                                {
                                for ($i=0 ;$i < $nbArticles ; $i++)
                                    {
 ?>                                    
                                    <tr>

                                    <td><img width="180" src="images/<?=$_SESSION['panier']['refProduit'][$i]?>"></td>

                                    <td><?=$_SESSION['panier']['libelleProduit'][$i]?></td>


                                    <td><?=htmlspecialchars($_SESSION['panier']['refProduit'][$i])?></td>


                                    <td><input type="text" size="4" class="quantity" id="q" name="q" value="<?=htmlspecialchars($_SESSION['panier']['qteProduit'][$i])?>">

                                        <!--<input type="button" id="a" value="+" onClick="ajout()">
                                        <input type="button" id="e" value="-" onClick="enleve()"> </td>-->

                                        <input type="button" id="a" value="+" >
                                        <input type="button" id="e" value="-" >

                                         </td>


                             <td class="price"><?=format_figures(($_SESSION['panier']['prixProduit'][$i]))?></td>

                             <td class="amount"><?=format_figures(($_SESSION['panier']['prixProduit'][$i]) * ($_SESSION['panier']['qteProduit'][$i])) ?></td>

                             <td><a class="SuppressCartLink" href="index.php?p=carts.delete&id=<?=$_SESSION['panier']['libelleProduit'][$i] ;?>" ><img src="librairies/icones/delete.gif" width="25px"></a></td>

                        </tr>
<?php
                                    }
?>
                        
<?php          
                                }   
?>
                        </table>
                    </form>

document.getElementById('a').onclick = function() {
document.getElementById('q').value =  parseInt(document.getElementById('q').value) +parseInt(1);
}

mdn a écrit :

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

<script type="text/javascript">

    $(document).ready(function () {

    $(".a").on("click", function(){

        //RECUPERE INDICE DU CHAMP AVEC CLASSE a
        var indice=$(this).index('.a');

        var form = document.getElementById('panier');

        var quantities = form.getElementsByClassName('q') ;
        var prices = form.getElementsByClassName('p') ;
        var amounts = form.getElementsByClassName('am') ;


        //DONNES CORRESPONNDANTES A LA LIGNE AFFECTTE
        var quantity = quantities[indice];
        var price = prices[indice];

        //INCREMENTATION DE LA QUANTITE
        quantity.value = parseFloat(quantity.value) + 1;

        //CALCUL DU TOTAL DE LA LIGNE
        var amount = quantity.value * parseFloat(price.innerHTML);
        //AFFICHAGE DU NOUVEAU MONTANT DANS LE FORMULAIRE
        amounts[indice].innerHTML = amount;

        //CALCUL DES QUANTITES TOTALES ET MONTANTS TOTAUX
        var number_items = 0;
        var number = 0;
        var total = 0;

        for(var i=0;i<quantities.length;i++)
            {
            number_items += parseFloat(quantities[i].value);

            total += parseFloat(prices[i].innerHTML) * parseFloat(quantities[i].value); 
            }

            //AFFICHAGE  DES QUANTITES TOTALES ET MONTANTS TOTAUX
            document.getElementById('nb_items').innerHTML = 'Nombre Items : ' + number_items;
            document.getElementById('total').innerHTML = 'Total : ' + format(total);

        $.ajax({
                    type : "POST",
                    url: $(this).attr("action" ),
                    dataType : 'html', // On désire recevoir du HTML
                    data: $(this).serialize(), //le formulaire est "sérializé"
                    success : function(code_html, statut) {
                        //$("#calendrier" ).html(code_html);
                    },
                    error: function() {
                        //$("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
                    }
                });
            return false;
        });
                    
    });

                $(".e").on("click", function(){

                var indice=$(this).index('.e');
  
                var form = document.getElementById('panier');

                var quantities = form.getElementsByClassName('q') ;

                var quantity = quantities[indice];

                quantity.value = parseFloat(quantity.value) - 1;
              
            });

$('#refresh').click();

window.onbeforeunload = function () {
                   
                    
                        $('#refresh').click();
                   
                };