如何将javascript函数应用于多个同名输入字段

Question

Please help i want to apply the javascript in the input list. This is what i have right now. When i click the item in select list, the input textbox will be autofill and it is working right now but when i add input textbox using jquery, the javascript i used in select list is not applied on the new input. It apply only on the first select, the original list. What should i do to apply it on all select list? Click this link for the sample

$(document).ready(function() {
    $("#category").change(function () {
        var unit = $(this).find(':selected').data('number');
        $('#numbervalue').val(unit);
    });

    var counter = 2;
    $("#addNumber").click(function () {
        var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'TextBoxDivMat' + counter);

        newTextBoxDiv.after().html('<td><select id="category"><option data-number="1" value="One">One</option><option data-number="2" value="Two">Two</option><option data-number="3" value="Three">Three</option></select></td><td><input id="numbervalue" type="text"></td>');
        newTextBoxDiv.appendTo("#TextBoxesGroupMat");
        counter++;
    });
    $("#removeButtonMat").click(function () {
        counter--;
        $("#TextBoxDivMat" + counter).remove();
    });
});

<table id="TextBoxesGroupMat">
    <thead>
        <tr>
            <th>Word</th>
            <th>Number</th>                                        
        </tr> 
    </thead>
    <tbody id="TextBoxDivMat1"> 
        <tr>
            <td>
                <select id="category">                                       
                    <option data-number="1" value="One">One</option>
                    <option data-number="2" value="Two">Two</option>
                    <option data-number="3" value="Three">Three</option>
                </select>
            </td> 
            <td><input id="numbervalue" type="text"></td> 
        </tr>
    </tbody>        
</table>
<button id="addNumber">+ add number</button>
<button id="removeButtonMat">remove</button>

Answer 1

If you add new elements into your HTML document then you need to attach the event to the newly added elements once again. After you add the new elements, you can call the function. But when you use ID then it is very likely that the jQuery will attach the function to the first element having that ID. If you want to use the same function to a bunch of elements then you can use a class identifier.

// Using ID
$("#category").on("change", function() {
// Your code here
})

// using class
$(".category").on("change", function() {
// your code here
})`

Answer 2

Ok, the problem is that you're changing an ID, which then only changes the first ID input - change to classes and all is good - see below snippet:

Updated Fiddle

Also, it's a bad idea to have on change on a select if there is no blank option - a user must first select two to then go back and select one

 $(document).ready(function() { $(document).on("change", ".category", function () { /* changed to class */ var unit = $(this).find(':selected').data('number'); $(this).parent().next().find('.numbervalue').val(unit); /* ugly but works, could be better */ }); var counter = 2; $("#addNumber").click(function () { var newTextBoxDiv = $(document.createElement('tr')) .attr("id", 'TextBoxDivMat' + counter); /* changed to add select and input with classes not IDs */ newTextBoxDiv.after().html('<td><select class="category"><option data-number="1" value="One">One</option><option data-number="2" value="Two">Two</option><option data-number="3" value="Three">Three</option></select></td><td><input class="numbervalue" type="text"></td>'); newTextBoxDiv.appendTo("#TextBoxesGroupMat"); counter++; }); $("#removeButtonMat").click(function () { counter--; $("#TextBoxDivMat" + counter).remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="TextBoxesGroupMat"> <thead> <tr> <th>Word</th> <th>Number</th> </tr> </thead> <tbody id="TextBoxDivMat1"> <tr> <td><select class="category"> <option data-number="1" value="One">One</option> <option data-number="2" value="Two">Two</option> <option data-number="3" value="Three">Three</option> </select></td> <td><input class="numbervalue" type="text"></td> </tr> </tbody> </table> <button id="addNumber">+ add number</button> <button id="removeButtonMat">remove</button> 

Answer 3

Please try this code

$(document).on('change',"#category",function () {
var unit = $(this).find(':selected').data('number');
$(this).parent().parent().find('#numbervalue').val(unit);
});

Answer 4

Replace categroy listener with

$(document).on('change', "#category",function () {
    var unit = $(this).find(':selected').data('number');
    $(this).parent().parent().find('#numbervalue').val(unit);
});