JSFiddle - React, Tailwind, and code Playground

HTML

<div class='radios'>
  <label>type one
    <input type="radio" value='0' name="type" checked>
  </label>

  <label>type two
    <input type="radio" value='1' name="type">
  </label>
</div>



<div class="boxes">
</div>

<p>Total: <span id='total'>0</span></p>

CSS

label {
  display: block;
}

.radios {
  margin-bottom: 1em;
}

.radios label {
  display: inline;
}

JavaScript

const data = [
	{
		'bla bla': 300,
		'blabla bla': 400,
		'ohhh bla': 4000
  },
  {
		'bla bla bla': 300,
		'blabbl': 111,
		'super bla': 6969,
		'blahblja': 4
  },
]

render()

document.body.addEventListener('click', e => {
	if(e.target.matches('input[type=radio]')) {
  	render(+e.target.value)
  }

	if(e.target.matches('input[type=checkbox')) {
  	calc()
  }
})

function render(type = 0) {
	total.textContent = 0
	const content = Object.entries(data[type]).map(([key, val]) => `<label>${key} price ${val}<input type="checkbox" data-price="${val}"></label>`).join('')
	document.querySelector('.boxes').innerHTML = content
}
  
function calc() {
	const price = [...document.querySelectorAll('.boxes input:checked')].map(i => i.dataset.price).reduce((a, b) => +a + +b, 0)
  total.textContent = price
}