JavaScript different actions on different sections by using one id

Question

I'm making a list of where there are different sections that will have different values and I want to change the text of those sections by using only one id.
The sections are named monthly, annually, biannually, and triennially. the monthly section will have a value of "$4" and others will have "Free".
Those sections should provide text-changing actions when their radio button is clicked.
This is the code that I have tried:

var radio = document.getElementById("rd1");
function radio() {
  document.getElementById("dollar").innerText = "Rs : 1150";
}

var radio2 = document.getElementById("rd2");
$(radio2).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

var radio3 = document.getElementById("rd3");
$(radio3).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

var radio4 = document.getElementById("rd4");
$(radio4).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

<input id="rd1" type="radio" name="Price" checked onclick="radio()" />
<label for="rd1">Monthly</label>
<input id="rd2" type="radio" name="Price" />
<label for="rd2">Annually</label>
<input id="rd3" type="radio" name="Price" />
<label for="rd3">Biannually</label>
<input id="rd4" type="radio" name="Price" />
<label for="rd4">Triennially</label>

<div class="console">
  <h1 id="dollar">
    <span id="icon"></span>
    <span id="number"></span>
  </h1>
</div>

In this code, there are some things I want:

• 1: The monthly price should be the default and have the data type of Numeric "1125"

• 2: The other prices will not be the default and will be a string value "Free"

• 3: They also have a total in which more than one value will be added and the free value will be equal to zero so no amount will be added with other

I'm trying for a whole day like 24 hours for real but can't do it. I hope you help me with this :) <3

Answer 1

Is this the sort of result you were hoping to achieve? There are comments within the code that try to clarify what is happening at each stage and I think it answers points 1-3 but not entirely sure on #3... hope it helps though

// find DOM elements of interest.
let span_number=document.querySelector('.console #number');
let span_icon=document.querySelector('.console #icon');
let tot=document.querySelector('.console #total');

// find the default checked input - this will help populate the "console" items
let def=document.querySelector('input[name="Price"]:checked');

// listen for change events using a delegated listener and process if it originates from RADIO button.
document.addEventListener('change',e=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
    // use the event.target property to identify the element and
    // thus access the dataset attributes and element value.
    span_number.textContent=e.target.dataset.value;
    span_icon.textContent=e.target.dataset.unit || '';
    tot.dataset.value=e.target.value;
  }
});

// at pageload, set the display in the "console" element.
span_number.textContent=def.dataset.value;
span_icon.textContent=def.dataset.unit || '';
tot.dataset.value=def.dataset.value;

#total{color:grey}
#total:before{
  content:attr(id)':';
  margin-right:0.25rem
}
#total:after{
  content:attr(data-value);
}

<!--
  inputs assign a value in accordance with question
  dataset attributes added to provide details cited in question when radio button is checked.
  the "default" - Monthly radio is selected by default as per point #1
  added #total as part of point #3 
-->
<input id="rd1" type="radio" value=1125 data-unit='RS' data-value='1125' name="Price" checked />
<label for="rd1">Monthly</label>

<input id="rd2" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd2">Annually</label>

<input id="rd3" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd3">Biannually</label>

<input id="rd4" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd4">Triennially</label>

<div class="console">
  <h1 id="dollar">
    <span id="icon"></span>
    <span id="number"></span>
  </h1>
  <span id='total'></span>
</div>