how can i differentiate multiple rows with same class using javascript? i've searched it but it shows only jquery and i know nothing about it. my rows always shows the amount in inventory of the last product selected like this example in this pic the example

here's what i wrote as js function:`

function showAmount(variable)
            {
                this.product = variable;
                if(product == '')
                {   
                    document.getElementsByClassName('qte').innerHTML = " ";
                }else
                {
                    const xmlhttp = new XMLHttpRequest();
                    var table = document.getElementById('tbody');
                    //var rows = table.rows.length;
                    //console.log(rows);
                    var rows = document.getElementsByClassName('qte');
                    console.log(rows[1]);
                    xmlhttp.onload = function(){
                        myObj = JSON.parse(this.responseText);
                        for(var j = 0; j < rows.length; j  )
                        {
                            for (var i = 0; i < myObj.length; i  )
                            {
                                if(product === myObj[i]['NomArt'])
                                {
                                    rows[j].innerHTML = myObj[i]['Qte'];
                                }
                            }
                        }
                        
                    }
                    xmlhttp.open("GET", "templates/Client/products.json", "true");
                    xmlhttp.send();
                }
            }

this function add rows to the table

function addItem() {
                items  ;
                    // code...
                var html = "<tr>";
                    html  = "<td><input type='text' class='form-control' name='product[]' list='produit' id='pick' onchange='showAmount(this.value)' ><datalist id='produit'> <?php foreach ($productinfo as $req) { ?><option value='<?php echo $req['NomArt']; ?>'><?php echo $req['NomArt']; } ?></option></datalist></td>";
                    html  = "<td  class='text-center qte'></td>";
                    html  = "<td><input type='number' class='form-control'  name='qte[]'></td>";
                    html  = "<td><button type='button' class='btn btn-danger' onclick='remove(this);'><i class='fa fa-close'></i></button></td>";
                html  = "</tr>";
         
                var row = document.getElementById("tbody").insertRow();
                row.innerHTML = html;
            }

` And i couldn't understand others exactly as they showed jquery with Ids and stuff. is there a way to do it with php cuz php approach also gave the same results showing the amount of the last product that's why i took javascript approach but couldn't get a handle of it.

CodePudding user response：

It would help to see your response, but I think the problem is that you're checking one product and updating all rows. You need to identify which row to update, and if your user puts the same product name in two different rows, your system will be confused, so start by changing your function call to onChange="showAmount(this)", so you're passing a DOM element rather than text.

function ShowAmount(productInput) {
    
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
        myObj = JSON.parse(this.responseText);
        row = productInput.parentElement.closest('tr'); // find the table row
        let i = myObj.map(item => item.NomArt).indexOf(productInput.value); // find matching data in response
        row.getElementsByClassName('qte')[0].innerHTML = myQbj[i].Qte // update the row

    }
    xmlhttp.open("GET", "templates/Client/products.json", "true");
    xmlhttp.send();
}

Of course, you're downloading the entire product catalogue every time the user makes a single change. If your database is large, this is very inefficient. You'd be better updating your back end to return data on a specified product.

xmlhttp.open("GET", "templates/Client/products.json?product=" productInput.value, "true");