CSS button styling on/after click issue - html

Question

junior dev working on a CSS button issue. It's a survey where when you click on a button in a scale to input your answer, the color of the button should change, stick, and stay that way until you go to the next page and continue (in essence, reset). Each page has three questions to answer before progressing.
Desired action/issue:
When you click your answer for Question One on the scale (using a series of 7 buttons to indicate your answer), it should change the color of the button you selected. When you click your answer for question two, it should change the color of THAT button to THAT color, and question ONE should KEEP it's color. Currently, it does not - clicking on Question Two removes the coloring from Question One.
I've gone through several options like :focus, :visited, and :active but am unable to find the answer. :focus looks like it changes the color on the click, but doesn't keep it once I click another Question after it. Attached is a screenshot so you can see a better example of what I'm talking about (question two has a selected button that is colored, and now question one is empty)
Screenshot example - question 2 button now has coloring, question 1 has coloring removed - how do I make it stop dropping the color when I click on question 2 buttons?
Summation: it changes color on click correctly, but does not KEEP that color once I click on the question after it. Full transparency, these were radio buttons and made by a developer previous to me but I've been tasked changing them over to 'regular' buttons - is that part of the issue? Any advice would be greatly appreciated! Thanks in advance!
Here's the code where it comes from:
return (
<div className={styles.leftSection}>
<div className={styles.center}>
<h1 className={styles.pageTitle}>{parse(title)}</h1>
<ProgressBar
done={meterProgress}
completedHeight={10}
backgroundColor={'#DD0D0D'}
backgroundHeight={2}
/>
{items.map((step, i) => {
if (index === i || index === i + 1 || index === i - 1) {
return (
<>
<button
className={styles.continueButton}
id="editButton"
onClick={handleEdit}
>
Edit Answer
</button>
<div className={styles.step} id={`${i}`}>
<h2 className={styles.question}>{step.question}</h2>
<form className={styles.form}>
<div className={styles.surveyBar}>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '7' : '1'}
className={styles.oneButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '6' : '2'}
className={styles.twoButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '5' : '3'}
className={styles.threeButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value="4"
className={styles.fourButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '3' : '5'}
className={styles.fiveButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '2' : '6'}
className={styles.sixButton}
onChange={handleChange}
/>
<input
type="button"
name={`${i}`}
value={step.reverseValue === true ? '1' : '7'}
className={styles.sevenButton}
onChange={handleChange}
/>
</div>
<div className={styles.opinion}>
<div className={styles.disagree}>Strongly Disagree</div>
<div className={styles.neutral}>Neutral</div>
<div className={styles.agree}>Strongly Agree</div>
</div>
</form>
</div>
</>
);
}
})}
</div>
{error == true ? (
<div className={styles.errorMessage}>
{' '}
Almost there, {user?.firstName}! Please fill out all of the questions
to continue 🚀 <br />
<div className={styles.proTip}>
Pro tip: Click on the “Reload Questions” button.
</div>{' '}
</div>
) : null}
{showProgressIndicators && (
<div className={styles.buttons}>
<button className={styles.continueButton} onClick={handleBlur}>
Reload Questions
</button>
<button className={styles.continueButton} onClick={next}>
<p>
{index === items.length - 2
? 'Complete' || 'Continue 🔥'
: 'Continue 🔥'}
</p>
</button>
</div>
)}
</div>
);
// Button Number 1
input[type='button'].oneButton:focus {
position: relative;
background-color: #6C1111;
color: #6C1111;
}
input[type='button'].oneButton:checked:focus {
position: relative;
background-color: #6C1111;
color: #6C1111;
}
.oneButton {
transform: scale(3);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #6C1111;
background-color: white;
color: white;
}
// // Button Number 2
input[type='button'].twoButton:focus {
position: relative;
background-color: #A73E12;
color: #A73E12;
}
input[type='button'].twoButton:checked:focus {
position: relative;
background-color: #A73E12;
color: #A73E12;
}
.twoButton {
transform: scale(2.5);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #A73E12;
background-color: white;
color: white;
}
// // Button Number 3
input[type='button'].threeButton:focus {
position: relative;
background-color: #E36B14;
color: #E36B14;
}
input[type='button'].threeButton:checked:focus {
position: relative;
background-color: #E36B14;
color: #E36B14;
}
.threeButton {
transform: scale(2);
margin: 18px;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #E36B14;
background-color: white;
color: white;
}
// // Button Number 4
input[type='button'].fourButton:focus {
position: relative;
background-color: #EAB902;
color: #EAB902;
}
input[type='button'].fourButton:checked:focus {
position: relative;
background-color: #EAB902;
color: #EAB902;
}
.fourButton {
transform: scale(1.5);
margin: 18px;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #EAB902;
background-color: white;
color: white;
}
// // Button Number 5
input[type='button'].fiveButton:focus {
position: relative;
background-color: #C16911;
color: #C16911;
}
input[type='button'].fiveButton:checked:focus {
position: relative;
background-color: #C16911;
color: #C16911;
}
.fiveButton {
transform: scale(2);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #C16911;
background-color: white;
color: white;
}
// // Button Number 6
input[type='button'].sixButton:focus {
position: relative;
background-color: #CF3B0F;
color: #CF3B0F;
}
input[type='button'].sixButton:checked:focus {
position: relative;
background-color: #CF3B0F;
color: #CF3B0F;
}
.sixButton {
transform: scale(2.5);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
background-color: white;
color: white;
border: 1px solid #CF3B0F;
}
// // Button Number 7
input[type='button'].sevenButton:focus {
position: relative;
background-color: #DD0D0D;
color: #DD0D0D;
}
input[type='button'].sevenButton:checked:focus {
position: relative;
background-color: #DD0D0D;
color: #DD0D0D;
}
.sevenButton {
transform: scale(3);
height: 20px;
width: 20px;
margin: 18px;
border-radius: 50%;
border: 1px solid #DD0D0D;
background-color: white;
color: white;
}

Answer 1

Well, I would use (a ver simple) Jquery to do that. Just add a class on click with the style you want. like this:
$('.input').click(function () {
$(this).siblings().removeClass('animation');
$(this).addClass('animation');
});
input {width:100px;}
.animation {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
</div>
<br>
<div>
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
</div>
<br>
<div>
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
<input class="input" type="buttom" value="buttom">
</div>
<br>
I add the line $(this).siblings().removeClass('animation');so if you chose an answer from same block it won't style both same time.