labels next to radio group with same name not work on second form

January 26, 2023

I have the following multiple radio group with same name

the label next to radio buttons work good with first form1
but in the second from2 the labels works on the radio buttons on the first form1
as this link https://jsfiddle.net/2dp63kw0/

<style>
.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked + label {
  background-color: #114ABB;
}

</style>

<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="direction" id="direction0" value="left" />
    <label class="btn btn-default" for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label class="btn btn-default" for="direction1">right</label>
</div>
</form>
    <hr>
<form id="form2">   

<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="direction" id="direction0"  value="left" />
    <label class="btn btn-default" for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label class="btn btn-default" for="direction1">right</label>
</div>
</form>

every labels next to radio buttons work on form which it belongs to

>Solution :

Change the "name" and "for" attributes in the second form with id=form2.

Also, use class instead of id if you want to apply same properties, as id is unique and used for a single element.

Try this:

.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked + label {
  background-color: #114ABB;
}

<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="direction" id="direction0" value="left" />
    <label class="btn btn-default" for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label class="btn btn-default" for="direction1">right</label>
</div>
</form>
    <hr>
<form id="form2">   

<div style="padding:20px;display:inline" class="custom-radio">
    <input type="radio" name="directionb" id="direction2"  value="left" />
    <label class="btn btn-default" for="direction2">left</label>
    <input type="radio" name="directionb" id="direction3"  value="top" />
    <label class="btn btn-default" for="direction3">right</label>
</div>
</form>