I have three radio buttons, all on the same name. When I clicked the first one, it selects the first on. When I click the second one (Need to click the bubble), it selects the second one. When I clicked the third one (Need to also click the bubble), it selects the third one. BUT, if I clicked the label for the second or third one, it automatically selects the first one.

Code:

• HTML

                    <div id="Div_For_All_Players"> {/* DIV for all players */}
                        <div id="Div_For_First_Player">
                            <input name="Player_Playing" type="radio" value="One_Player" id="Radio_1" className="Radio_Buttons" onClick={Player_One_Clicked}></input>{/* Radio Buttons for How Many Players */}
                            <label htmlFor="Radio_1" id="Label_1" className="First_Button">One Player</label>{/* Labels for One Player */}
                        </div>

                        <div id="Div_For_Second_Player">
                            <input name="Player_Playing" type="radio" value="Two_Players" id="Radio_2" className="Radio_Buttons" onClick={Player_Two_Clicked}></input>{/* Radio Buttons for How Many Players */}
                            <label htmlFor="Radio_1" id="Label_2" className="Second_Button">Two Players</label>{/* Labels for Two Players */}
                        </div>

                        <div id="Div_For_Third_Player">
                            <input name="Player_Playing" type="radio" value="Three_Players" id="Radio_3" className="Radio_Buttons" onClick={Player_Three_Clicked} defaultChecked={true}></input>{/* Radio Buttons for How Many Players */}
                            <label htmlFor="Radio_1" id="Radio_3_label" className="Third_Button">Three Players</label>{/* Label for Three Players */}
                        </div>
                    </div>

CSS:

#Div_For_First_Player {
  text-align: left;
  overflow: hidden;
  line-height: 1em;
  position: relative;
  bottom: -20px;
  width: 100px;
}
#Div_For_Second_Player {
  display: flex;
  justify-content: center;
  text-align: center;
}
#Div_For_Third_Player {
  text-align: right;
  position: relative;
  top: -20px;
  float: right;
}

I tried to change the width of the first one to 100px so the div isn’t as much