How to display radio button value on checked (not on clicked). *or pls guide me if there is better way for ecommerce product page*

I’m creating an ecommerce website and I’m having issue on the pricing of product page based on radio (product) button.

Issue 1 – the price is not displayed when the page is loaded
enter image description here

Issue 2 – the price displayed has lots of decimal point (I tried used number_format(“price”,2) but it couldn’t be displayed)
enter image description here

Below are the codes of the page

code

  window.addEventListener('DOMContentLoaded', function() {
  const groups = [...document.querySelectorAll(".swatch")].slice(1); // drop the first div
  document.getElementById("container").addEventListener("click", function(e) {
    const tgtDiv = e.target.closest(".swatch-element")
    if (tgtDiv) {
      const groupId = tgtDiv.querySelector("input[type=radio]").dataset.group;
      groups.forEach(aGroup => aGroup.classList.toggle("hide", groupId !== aGroup.id))

    }
  });
});
    function check() {
        $("#swatch-1-9").prop("checked", true);
    }
    function check2() {
        $("#swatch-1-6").prop("checked", true);
    }
    function check3() {
        $("#swatch-1-4").prop("checked", true);
    }
    function check4() {
        $("#swatch-1-1").prop("checked", true);
    }

        function displayRadioValue() {
            var ele = document.getElementsByName('length');
            
            for(i = 0; i < ele.length; i++) {
                if(ele[i].checked)
                document.getElementById("price").innerHTML
                        = "RM " + ele[i].value*<?php echo $product['wesell'];?>
                            
                        ;
            }
        }
  
.swatch {
  margin: 1em 0;
  display:flex;
  flex-flow: row;
}
.header { width:70px}
.hide { display: none; }

.swatch .header {
  margin: 0.5em 0;
}

.swatch input {
  display: none;
}

.swatch label {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  float: left;
  min-width: 50px;
  height: 35px;
  margin: 0;
  border: #ccc 1px solid;
  background-color: #ddd;
  font-size: 13px;
  text-align: center;
  line-height: 35px;
  white-space: nowrap;
  text-transform: uppercase;
}

.swatch-element label {
  padding: 0 10px;
}

.color.swatch-element label {
  padding: 0;
}

.swatch input:checked+label {
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
  border-color: transparent;
}

.swatch .swatch-element {
  float: left;
  -webkit-transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  margin: 0px 10px 10px 0;
  position: relative;
}

.crossed-out {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.swatch .swatch-element .crossed-out {
  display: none;
}

.swatch .swatch-element.soldout .crossed-out {
  display: block;
}

.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60);
  -khtml-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
}

.swatch .tooltip {
  text-align: center;
  background: gray;
  color: #fff;
  bottom: 100%;
  padding: 10px;
  display: block;
  position: absolute;
  width: 100px;
  left: -23px;
  margin-bottom: 15px;
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.swatch .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

.swatch .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid gray 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.swatch .swatch-element:hover .tooltip {
  filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

.swatch.error {
  background-color: #E8D2D2!important;
  color: #333!important;
  padding: 1em;
  border-radius: 5px;
}

.swatch.error p {
  margin: 0.7em 0;
}

.swatch.error p:first-child {
  margin-top: 0;
}

.swatch.error p:last-child {
  margin-bottom: 0;
}

.swatch.error code {
  font-family: monospace;
}
<div class="swatch color clearfix" id="container" data-option-index="0">
  <div class="header">
    Product
  </div>
  <div data-value="black" class="swatch-element color black available">
    <div class="tooltip">black</div>
    <input id="swatch-0-black" checked name="option-0" value="0.96" type="radio" data-group="group1" checked onclick="displayRadioValue()   ">
    <label for="swatch-0-black" style="background-color: black; background-image: url(./assets/images/black.png)"><img class="crossed-out" src="./assets/images/soldout.png" alt=""></label>
  </div>
  <div data-value="red" class="swatch-element color red available">
    <div class="tooltip">
      red
    </div>
    <input id="swatch-0-red" name="option-0" value="1.34" type="radio" data-group="group2" onclick="check2(),displayRadioValue()">
    <label for="swatch-0-red" style="background-color: red; background-image: url(./assets/images/red.png)">
                        <img class="crossed-out" src="./assets/images/soldout.png" alt="">
                        </label>
  </div>
  <div data-value="white" class="swatch-element color white available">
    <div class="tooltip">
      white
    </div>
    <input id="swatch-0-white" name="option-0" value="1.48" type="radio" data-group="group3" onclick="check3(),displayRadioValue()">
    <label for="swatch-0-white" style="background-color: white; background-image: url(./assets/images/white.png)">
                        <img class="crossed-out" src="./assets/images/soldout.png" alt="">
                        </label>
  </div>
  <div data-value="blue" class="swatch-element color blue available">
    <div class="tooltip">
      blue
    </div>
    <input id="swatch-0-blue" name="option-0" value="1.52" type="radio" data-group="group4" onclick="check4(),displayRadioValue()">
    <label for="swatch-0-blue" style="background-color: blue; background-image: url(./assets/images/blue.png)">
                        <img class="crossed-out" src="./assets/images/soldout.png" alt="">
                        </label>
  </div>
</div>

<div class="swatch clearfix" data-option-index="1" id="group1">
  <div class="header">
    Weight
  </div>
  <div data-value="small" class="swatch-element small available">
    <input id="swatch-1-9" name="length" value="0.96" type="radio" id="group4a"  checked  onclick="displayRadioValue()">
    <label for="swatch-1-9">
                        0.96g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
                        </label>
  </div>

</div>

<div class="swatch clearfix hide" id="group2">
  <div class="header">
    Weight
  </div>
  <div data-value="small" class="swatch-element small available">
    <input id="swatch-1-6" name="length" value="1.34" type="radio"  onclick="displayRadioValue()">
    <label for="swatch-1-6">
      1.34g
    </label>
  </div>
  <div data-value="medium" class="swatch-element medium available">
    <input id="swatch-1-7" name="length" value="1.44" type="radio" id="group3b" onclick="displayRadioValue()">
    <label for="swatch-1-7">
      1.44g 
    </label>
  </div>
  <div data-value="medium" class="swatch-element medium available">
    <input id="swatch-1-8" name="length" value="1.54" type="radio" id="group3c" onclick="displayRadioValue()">
    <label for="swatch-1-8">
      1.54g 
    </label>
  </div>
  
</div>

<div class="swatch clearfix hide" id="group3">
  <div class="header">
    Weight
  </div>
  <div data-value="small" class="swatch-element small available">
    <input id="swatch-1-4" name="length" value="1.48" type="radio" onchange="displayRadioValue()">
    <label for="swatch-1-4">
                        1.48g 
                        </label>
  </div>
  <div data-value="medium" class="swatch-element medium available">
    <input id="swatch-1-5" name="length" value="1.49" type="radio" id="group2b" onclick="displayRadioValue()">
    <label for="swatch-1-5">
                        1.49g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
                        </label>
  </div>
</div>

<div class="swatch clearfix hide" id="group4">
  <div class="header">
    Weight
  </div>
  <div data-value="small" class="swatch-element small available">
    <input id="swatch-1-1" name="length" value="1.52" type="radio"  onclick="displayRadioValue()">
    <label for="swatch-1-1">
                        1.52g
                        </label>
  </div>
  <div data-value="medium" class="swatch-element medium available">
    <input id="swatch-1-2" name="length" value="1.54" type="radio" onclick="displayRadioValue()">
    <label for="swatch-1-2">
                        1.54g 
                        </label>
  </div>
  <div data-value="medium" class="swatch-element medium available">
    <input id="swatch-1-3" name="length" value="1.57" type="radio" onclick="displayRadioValue()">
    <label for="swatch-1-3">
                        1.57g
                        </label>
  </div>
</div>

    <div id="purchase-1293235843">
    <div class="detail-price" itemprop="price">
      <span class="price" id="price">

      </span>
    </div>
  </div>