Use radio button name twice - html

Question

I have a multi step form with 3 different "pages". 1 and 2 are for regular user input and page 3 is a summary from 1 and 2. Page 1 has some radio buttons. I'd like to show these in page 3 again (they should be editable). I don't want to use to different names, because they show exact the same... how can I achieve this? Here is the code for better understanding.
input {
display: none;
}
label {
width: 25px;
height: 25px;
display: inline-block;
color: #fff;
background-color: #000;
text-align: center;
line-height: 25px;
}
input:checked + label {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-1">
<input type="radio" id="1" name="a" value="1" checked>
<label for="1">1</label>
<input type="radio" id="2" name="a" value="2">
<label for="2">2</label>
</div>
<div class="page-2">
<!-- ... -->
</div>
<div class="page-3">
<input type="radio" id="1" name="a" value="1">
<label for="1">1</label>
<input type="radio" id="2" name="a" value="2">
<label for="2">2</label>
</div>

Answer 1

you cannot use twice the same id. Also to avoid styling issues , you should not use a number as a first letter for an attribute value (from old specification ) see : What are valid values for the id attribute in HTML?.
here is an example allowing a single input to be used by more than 1 label . Labels will need to be inside a sibbling of the input in order to style them.
possible working example with div sibblings of inputs:
input {
display: none;
}
label {
width: 25px;
height: 25px;
display: inline-block;
color: #fff;
background-color: #000;
text-align: center;
line-height: 25px;
}
input#a1:checked ~ div label[for="a1"],
input#a2:checked ~ div label[for="a2"]{
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="a1" name="a" value="1" checked>
<input type="radio" id="a2" name="a" value="2">
<div class="page-1">
<label for="a1">1</label>
<label for="a2">2</label>
</div>
<div class="page-2">
<!-- ... -->
</div>
<div class="page-3">
<label for="a1">1</label>
<label for="a2">2</label>
</div>

Answer 2

use different id='' everytime.
<div class="page-3">
<input type="radio" id="3" name="a" value="1">
<label for="1">1</label>
<input type="radio" id="4" name="a" value="2">
<label for="2">2</label>
</div>