Radio Button Custom Styling For Multiple Prompts - html

Question

Basically, I am trying to create my own radio button component for react and reuse over again, but I am struggling to get the buttons to work correctly with the styling. If you select a button in the second set it doesn't react properly even though each set has a different name property. If I get rid of the custom style it works fine.
I think it has something to do with this, but haven't found a solution:
.radio-custom {
opacity: 0;
position: absolute;
}
Here is my codepen:
https://codepen.io/Sbphillips19/pen/XLyzzN
HTML:
<form>
<h2>Radio Button Prompt 1</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio">
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
</div>
<h2>Radio Button Prompt 2</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group-2" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
</div>
</form>
and CSS:
.radio-custom {
opacity: 0;
position: absolute;
}
.radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.radio-custom + .radio-custom-label:before {
content: '';
background: white;
border: 2px solid #888888;
display: inline-block;
vertical-align: middle;
width: 44px;
height: 44px;
padding: 2px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
background: #444444;
box-shadow: inset 0px 0px 0px 6px #fff;
}

Answer 1

The problem is with the attr id that should be unique!
Change the following second part of the html to this and it will work:
Working example:https://codepen.io/jo-o-teixeira-the-sasster/pen/agQErM
Radio Button Prompt 2
<div>
<input id="radio-4" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-4" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-5" class="radio-custom"name="radio-group-2" type="radio">
<label for="radio-5" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-6" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-6" class="radio-custom-label">Third Choice</label>
</div>
</div>