Jquery and Multiple Fields with same Name - html

Question

I have this HTML code :
<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>
And I have this JQuery code :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
// If Click on Radio
$('[id^="lineChoice"]').click(function(){
// Hide Line
$("#lineA").hide();
$("#lineB").hide();
// Display Line
if($(this).val()=="A") $("#lineA").show();
if($(this).val()=="B") $("#lineB").show();
});
// If Change on List
$('#mySelect').change(function(){
// Just Display in Console
console.log($(this).val());
});
});
</script>
Both lines are basically hidden.
And by selecting the radio button I display the corresponding line. I voluntarily simplified the name of the lines (it is more complex in my initial code).
If I select row A. Display in JQuery works fine. But I get nothing if I select line B. I know that my "select" have the same name but that's precisely the goal for me. Have only one "select" to process but only the displayed one.
Hoping to be clear in my question which is "Why no display when selecting line B while it works with line A...?

Answer 1

You cannot have two elements with the same id within one page. Hence I update your code using different Ids for the two selects.
In order to register the event using the name, you can use the attribute selector instead. [name="mySelect"] would do the trick.
The reason why the change event is not working on line B is because $('#mySelect').change(function(){}) only register the event on the first select which turn out is the Line A <select>
$(document).ready(() => {
$('input[type="radio"]').on('change', (e) => {
$("#lineA").hide();
$("#lineB").hide();
if (e.currentTarget.id === 'lineChoiceA') {
$("#lineA").show();
} else {
$("#lineB").show();
}
})
// If Change on List
$('[name="mySelect"]').change(function() {
// Just Display in Console
console.log($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect1">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect2">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>