If I click to the first radio btn the second box first value should highlighted. How is that possible?

Question

I have two boxes, One contains radio btns and in another box I have some values. If I click to the first radio button. First column values should highlight.

My structure of design

Answer 1

i think you need to use data-* and check any check box value..

then , you can add specific class name like highlited for making special style..

let checkBoxs = document.getElementsByClassName("checkBox");

//get value of any check box , and return it into highlite() as parameter 
for(let w = 0; w < checkBoxs.length; w++){
checkBoxs[w].addEventListener("click", () => highlite(checkBoxs[w].value) );
}
highlite("vip"); // call function with default value 
function highlite(parm){
let planCols = document.getElementsByClassName("plan-col");
//get value of any 'data-set' attrs
for(let w = 0; w < planCols.length; w++){
// if current 'data-set' equal checked value
  if(parm == planCols[w].getAttribute("data-set")){
  //  if true , add a new class name (highlited)
  planCols[w].classList.add("highlited");
  }else{
  // esle ? remove highlited
  planCols[w].classList.remove("highlited");
  }
}
}

.container{padding:1re 2rem;}
.container .grid-container{display: grid;grid-template-columns: 1fr 150px;}
.container .plans{display: grid;grid-template-columns: 1fr 1fr 1fr;}
.container .options{padding:.7rem;}
.plan-col{border: 1px solid #eee;text-align:center;margin:0 .5rem}
.plan-col div {margin:.5rem 0;}
.plan-col div > * {display:inline;}
.plan-col.highlited{background-color: #dfefff;}
.container .options > div {padding: .1rem;}
.options div > * {display:inline;}

<div class="container">
  <div class="grid-container">
    <div class="plans">
      <div class="plan-col" data-set="basic">
        <h4>Basic</h4>
        <div>
          <strong>CPU</strong>
          :
          <p>2.3GHz</p>
        </div>
        <div>
          <strong>RAM</strong>
          :
          <p>8GB</p>
        </div>
      </div>
      <div class="plan-col" data-set="vip" >
        <h4>VIP</h4>
        <div>
          <strong>CPU</strong>
          :
          <p>2.7GHz</p>
        </div>
        <div>
          <strong>RAM</strong>
          :
          <p>16GB</p>
        </div>
      </div>
      <div class="plan-col" data-set="basic">
        <h4>Basic (new)</h4>
        <div>
          <strong>CPU</strong>
          :
          <p>3.4GHz</p>
        </div>
        <div>
          <strong>RAM</strong>
          :
          <p>16GB</p>
        </div>
      </div>
    </div>
    <div class="options">
      <div>
      <input type="radio" id="basic" class="checkBox" name="contact" value="basic" >
      <label for="basic" >Basic</label>
      </div>
      <div>
      <input type="radio" id="vip" class="checkBox" name="contact" value="vip" checked>
      <label for="vip" >VIP</label>
      </div>
    </div>
  </div>
</div>