JavaScript - Textbox Value Change To Its Own Value If Radio Button Deselect

Hey Guys, I have this really important question (I'm really stuck! I'm a baby coder ).

I have four radio button and four textbox, each one of these textboxes has its own value which is provided from a database, now each one of these textboxes is related to a radio button and what happen is if I select radio button number one then the value of textbox number one is going to change by which is fine but when I'm going to select the other radio buttons (which is obvious that radio button number one is no longer selected) but textbox number one keeps the changed value and don't going back to its default value.

let me give you my example (which I working on it right now), I have four textbox and four radio buttons, now my first textbox has a value="1" I select the first radio button and the first textbox value turned to value="2" now I select the second radio button and the second text value change from 1 to 2 just like the first text box (what happened is that the first radio button is deselected but the first textbox value didn’t turn back to its first value which was value="1" and keep the changed value which is value="2" (that happens to all text boxes and radio buttons as well)

This is my stupid code: (please help me out here, I'm going to cry, Btw you can completely change the code if you want it’s not important I just need to restore these textbox to their first value if their related radio buttons is no longer selected. one more thing I manage to find a way to do that but I find out it is not stable (onblur) if I click somewhere else in the page (rather than the radio buttons) then the changed value return to default one which is SUCKS! I checked the other event handlers but didn’t work!





<script type="text/javascript">
function firstaddit(){
if(document.getElementById("Rate1").value=="1")
{
document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)+1%>"
}}
</script>

<script type="text/javascript">
function secondaddit(){
if(document.getElementById("Rate2").value=="2")
{
document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)+1%>"
}}
</script>

<script type="text/javascript">
function thirdaddit(){
if(document.getElementById("Rate3").value=="3")
{
document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)+1%>"
}}
</script>

<script type="text/javascript">
function fourthaddit(){
if(document.getElementById("Rate4").value=="4")
{
document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)+1%>"
}}

</script>



<script type="text/javascript">
function ReturnFirstAddit(){
if(document.getElementById("Rate1").value=="1")
{
document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)%>"
}}

</script>

<script type="text/javascript">
function ReturnSecondAddit(){
if(document.getElementById("Rate2").value=="2")
{
document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)%>"
}}

</script>

<script type="text/javascript">
function ReturnThirdAddit(){
if(document.getElementById("Rate3").value=="3")
{
document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)%>"
}}

</script>

<script type="text/javascript">
function ReturnFourthAddit(){
if(document.getElementById("Rate4").value=="4")
{
document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)%>"
}}

</script>




Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()">
<br/><br/>

Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()">
<br/><br/>

Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()">
<br/><br/>

Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()">
<br/><br/>





<%=(rs_vote.Fields.Item("Choice1").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()">
<br/><br/>

<%=(rs_vote.Fields.Item("Choice2").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()">
<br/><br/>

<%=(rs_vote.Fields.Item("Choice3").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()">
<br/><br/>

<%=(rs_vote.Fields.Item("Choice4").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()">
<br/><br/>