php how to auto field multiple input field the selected value from dropdown

Question

can i ask for suggestion or idea how to make our additional input field get autofill if we select from dropdown value?

this is the accessories input. if we click add (+) button, then it will add the form input.

i have succeed in making the input autofield when i click the selected value. however, when i add another input field and select another dropdown values, it change into the first input. not the second input.

this is my java. i think it must be something worng here. but i have no idea. can you give me a little idea on how to do that? i've been searching for ages.

<script>
    // onkeyup event will occur when the user
    // release the key and calls the function
    // assigned to this event
    function GetAccessories(str) {
        if (str.length == 0) {
            document.getElementById("accessories_name").value = "";
            document.getElementById("accessories_id").value = "";
          
            return;
        }
        else {

            // Creates a new XMLHttpRequest object
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {

                // Defines a function to be called when
                // the readyState property changes
                if (this.readyState == 4 &&
                        this.status == 200) {
                    
                    // Typical action to be performed
                    // when the document is ready
                    var myObj = JSON.parse(this.responseText);

                    // Returns the response data as a
                    // string and store this array in
                    // a variable assign the value
                    // received to first name input field
                    
                    document.getElementById
                        ("accessories_name").value = myObj[0];
                    
                    // Assign the value received to
                    // last name input field
                    document.getElementById(
                        "accessories_id").value = myObj[1];
                      
                }
            };

            // xhttp.open("GET", "filename", true);
            xmlhttp.open("GET", "fetchaccessories.php?accessories_code=" + str, true);
            
            // Sends the request to the server
            xmlhttp.send();
        }
    }
</script>

Answer 1

The problem could be a wide variety of things. But for one, from the code you've provided; The javascript function updates the elements by ID. A document should only contain one element with with a specific ID. You're likely creating multiple fields with the same ID. The function will however only update the first element with the given ID.