Here is a jsFiddle showing the issue I am having. I have a dynamic number of records coming in from a database. I'm inserting these records into a table, and the very first row of the table is a "bulk insert" row. If a user selects a value from the dropdown in the first row I want it to update all the other rows. For some reason it's only updating the last row. Can somebody look and tell me what I'm doing wrong? Please!?!?
<div class="table-responsive">
<table
id="insTblDates"
class="table table-sm table-striped"
style="font-size: small"
>
<thead>
<tr>
<th>From</th>
<th>To</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>
<div class="dropdown d-grid d-md-block text-center">
<button
id="copy_btnLocationArea"
type="button"
class="btn btn-outline-dark btn-sm dropdown-toggle mx-1"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
style="overflow: visible"
aria-expanded="false"
>
<span class="fa fa-globe"></span> Location
</button>
<ul
id="copy_ddLocationAreas"
class="dropdown-menu csr_lnk"
style="max-height: 400px; width: auto; overflow: auto"
>
<li>
<input
type="radio"
class="d-inline copy_ddLocationArea"
id="copy_ddLocationArea1"
value="1"
name="copy_ddlocationArea"
onclick="copy_ddLocationAreaChanged(this.value);"
/><label
for="copy_ddLocationArea1"
class="d-inline input small dropdownLabel_NormalFont"
>In County</label
>
</li>
<li>
<input
type="radio"
class="d-inline copy_ddLocationArea"
id="copy_ddLocationArea2"
value="2"
name="copy_ddlocationArea"
onclick="copy_ddLocationAreaChanged(this.value);"
/><label
for="copy_ddLocationArea2"
class="d-inline input small dropdownLabel_NormalFont"
>Out of County</label
>
</li>
<li>
<input
type="radio"
class="d-inline copy_ddLocationArea"
id="copy_ddLocationArea3"
value="3"
name="copy_ddlocationArea"
onclick="copy_ddLocationAreaChanged(this.value);"
/><label
for="copy_ddLocationArea3"
class="d-inline input small dropdownLabel_NormalFont"
>Out of Country</label
>
</li>
</ul>
</div>
</td>
</tr>
<tr id="f3112025|t3112025">
<td>3/11/2025</td>
<td>3/11/2025</td>
<td>
<div class="dropdown d-grid d-md-block text-center">
<button
type="button"
class="btn btn-outline-dark btn-sm dropdown-toggle new_btnLocationArea mx-1"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
style="overflow: visible"
aria-expanded="false"
>
<span class="fa fa-globe"></span> Location
</button>
<ul
id="new_ddLocationAreas3112025"
class="dropdown-menu csr_lnk new_ddLocationAreas"
style="max-height: 400px; width: auto; overflow: auto"
>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea1_3112025"
value="1"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea1_3112025"
class="d-inline input small dropdownLabel_NormalFont"
>In County</label
>
</li>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea2_3112025"
value="2"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea2_3112025"
class="d-inline input small dropdownLabel_NormalFont"
>Out of County</label
>
</li>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea3_3112025"
value="3"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea3_3112025"
class="d-inline input small dropdownLabel_NormalFont"
>Out of Country</label
>
</li>
</ul>
</div>
</td>
</tr>
<tr id="f3182025|t3182025">
<td>3/18/2025</td>
<td>3/18/2025</td>
<td>
<div class="dropdown d-grid d-md-block text-center">
<button
type="button"
class="btn btn-outline-dark btn-sm dropdown-toggle new_btnLocationArea mx-1"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
style="overflow: visible"
aria-expanded="false"
>
<span class="fa fa-globe"></span> Location
</button>
<ul
id="new_ddLocationAreas3182025"
class="dropdown-menu csr_lnk new_ddLocationAreas"
style="max-height: 400px; width: auto; overflow: auto"
>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea1_3182025"
value="1"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea1_3182025"
class="d-inline input small dropdownLabel_NormalFont"
>In County</label
>
</li>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea2_3182025"
value="2"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea2_3182025"
class="d-inline input small dropdownLabel_NormalFont"
>Out of County</label
>
</li>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea3_3182025"
value="3"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea3_3182025"
class="d-inline input small dropdownLabel_NormalFont"
>Out of Country</label
>
</li>
</ul>
</div>
</td>
</tr>
<tr id="f3252025|t3252025">
<td>3/25/2025</td>
<td>3/25/2025</td>
<td>
<div class="dropdown d-grid d-md-block text-center">
<button
type="button"
class="btn btn-outline-dark btn-sm dropdown-toggle new_btnLocationArea mx-1"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
style="overflow: visible"
>
<span class="fa fa-globe"></span> Location
</button>
<ul
id="new_ddLocationAreas3252025"
class="dropdown-menu csr_lnk new_ddLocationAreas"
style="max-height: 400px; width: auto; overflow: auto"
>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea1_3252025"
value="1"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea1_3252025"
class="d-inline input small dropdownLabel_NormalFont"
>In County</label
>
</li>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea2_3252025"
value="2"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea2_3252025"
class="d-inline input small dropdownLabel_NormalFont"
>Out of County</label
>
</li>
<li>
<input
type="radio"
class="d-inline new_ddLocationArea"
id="new_ddLocationArea3_3252025"
value="3"
name="new_ddlocationArea"
onclick="new_ddLocationAreaChanged(this.value);"
/><label
for="new_ddLocationArea3_3252025"
class="d-inline input small dropdownLabel_NormalFont"
>Out of Country</label
>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
function copy_ddLocationAreaChanged(val) {
$(".new_ddLocationArea").each(function () {
if ($(this).val() == val) {
$(this).prop("checked", true)
}
})
}
All of the subsequent radio buttons have the same name, so they're effectively all one group of radio buttons. And only one radio button in a group can be selected, this is by design.
If you give a different name to each group, that seems to correct the problem. I can't speak to what other changes you'd need to make to your overall system as a result of course. But if the plan is to use radio buttons then any such radio buttons which need to be simultaneously selectable will need to be grouped separately.