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?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<script>
$(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();
});
});
</script>
</head>
<body>
<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>
</body>
</html>