html css js math output

Question

I'm not an expert on JS, so maybe this question have a super easy answer, I don't know.

I have a grid of 9 button, a grid with 9 radio type input and another 5 radio type input. Every single one of this element are needed to make some math to send in outup on the page how much someone would spend selecting this format like weight, length...

I have 3 different spot where I should see an output with the price, I have an excel where I can see the price I should put, but I don't know how to create such a function. the function should say like: if you select the first button, the third radio type, and the second radio type, given all their value and the math formula to do it, the price is €x.

body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}


.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2{
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px; 
}

<div class="justify evenly flex-row">
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel9" class="btn bottoneCategoria">Altro</button>
                    </div>
                </div>
            </div>
            

<div id="demo" class="justify m-30 evenly flex-row bg hide">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
                    </div>
                </div>
            </div>

<div class="flex-row bg m-7 justify evenly">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
                    </div>
                </div>
            </div>


            <div class="justify evenly flex-row">
                <div class="flex-col">
                    <p>TARIFFA DI GESTIONE</p>
                </div>
                <div class="flex-col">
                    <p>TARIFFA DI RESO</p>
                </div>
                <div class="flex-col">
                    <p>TARIFFA DI STOCCAGGIO</p>
                </div>
            </div>

            <div class="tabcosti evenly justify flex-row">
                <div class="flex-col">
                    <p id="reso">€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span></p>
                </div>
                <div class="flex-col">
                    <p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
                </div>
            </div>

            <div class="flex-row tabcosti2">
                <div class="flex-col justify">
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
                    </div>
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
                    </div>
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
                    </div>
                </div>
                <div class="flex-col spacer"></div>
            </div>

Just to make it clear, I should place the output of the formula on the orange background grid where I already placed the 3 € sign.

Answer 1

Sorry that I'm a day late to the party, but you can use the jQuery change event to find the value of the clicked radio button.

Here's a simple example:

document.getElementById('large').addEventListener('change', function() {
  var change = document.getElementById('large');
  var times = document.getElementById('times').value / 100;
  if (change.checked) {
    document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) * times;
  } else {
    document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) / times;
  }
});
// -------------------
$('input[name=course1]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course1]:checked').val());
  var prevValue = parseInt($('input[name=course1]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});
$('input[name=course2]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course2]:checked').val());
  var prevValue = parseInt($('input[name=course2]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});
$('input[name=course3]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course3]:checked').val());
  var prevValue = parseInt($('input[name=course2]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});

function validate() {
  var value = parseInt(document.getElementById('times').value);
  if (value < 110 || value > 200 || value == "") {
    console.log('failure');
    document.getElementById('times').focus();
    document.getElementById('times').style.borderBottom = '2px solid #ff0000';
  } else {
    document.getElementById('times').style.borderBottom = '2px solid black';
  }
}

#calories::after {
  content: " calories in this meal";
}
#times:focus, #times {
  outline: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom:2px solid black;
}
#times {
  font-family: standard;
  border-bottom:none;
}

<button onclick="console.clear();">Console covering page? Click this button to get rid of all console messages!</button>
<hr>
<input type="checkbox" id="large" />
<label for="large">Large food (<input type="number" min="110" max="200" value="150" id="times" oninput="validate();" onchange="this.style.borderBottom = 'none';" />) % change! (click number to edit)</label>
<hr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" checked="checked" name="course1" value="0" id="opt1" />
<label for="opt1">I don't want appetizer</label>
<div></div>
<input type="radio" name="course1" value="200" id="opt2" />
<label for="opt2">Peanuts</label>
<hr>
<input type="radio" checked="checked" name="course2" value="0" id="opt3" />
<label for="opt1">I don't want a main course</label>
<div></div>
<input type="radio" name="course2" value="1000" id="opt4" />
<label for="opt4">Pizza</label>
<div></div>
<input type="radio" name="course2" value="2000" id="opt5" />
<label for="opt5">A Whole Pizza</label>
<hr>
<input type="radio" checked="checked" name="course3" value="0" id="opt6" />
<label for="opt6">I don't want dessert!</label>
<div></div>
<input type="radio" name="course3" value="300" id="opt7" />
<label for="opt7">Brownie</label>
<div></div>
<input type="radio" name="course3" value="500" id="opt8" />
<label for="opt8">Cake</label>
<hr>
<p id="calories">0</p>

Answer 2

The basic method is:

1. Add a change event to the radio inputs
2. When the input value changes, calculate the price
3. Output the correct price (or different prices) to each of the 3 elements

Here is a simple example:

document.querySelectorAll('input[type=radio]').forEach(function(input) {
  //add change event to each input
  input.onchange = function() {
    //calculation for price here, e.g.:
    var price;

    if (this.value == '0-1 kg') {
      price = 1;
    } else {
      price = 2;
    };

    //output price here
    document.querySelectorAll('.tabcosti .white')[0].innerText = price;
    document.querySelectorAll('.tabcosti .white')[1].innerText = price;
    document.querySelectorAll('.tabcosti .white')[2].innerText = price;
  };
})

body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}

.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

<div class="justify evenly flex-row">
  <div class="flex-col">
    <div class="flex-row">
      <button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
    </div>
    <div class="flex-row">
      <button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
    </div>
    <div class="flex-row">
      <button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
    </div>
  </div>
  <div class="flex-col">
    <div class="flex-row">
      <button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
    </div>
    <div class="flex-row">
      <button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
    </div>
    <div class="flex-row">
      <button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
    </div>
  </div>
  <div class="flex-col">
    <div class="flex-row">
      <button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
    </div>
    <div class="flex-row">
      <button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
    </div>
    <div class="flex-row">
      <button id="sel9" class="btn bottoneCategoria">Altro</button>
    </div>
  </div>
</div>


<div id="demo" class="justify m-30 evenly flex-row bg hide">
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
    </div>
  </div>
</div>

<div class="flex-row bg m-7 justify evenly">
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
    </div>
  </div>
</div>


<div class="justify evenly flex-row">
  <div class="flex-col">
    <p>TARIFFA DI GESTIONE</p>
  </div>
  <div class="flex-col">
    <p>TARIFFA DI RESO</p>
  </div>
  <div class="flex-col">
    <p>TARIFFA DI STOCCAGGIO</p>
  </div>
</div>

<div class="tabcosti evenly justify flex-row">
  <div class="flex-col">
    <p id="reso">€ <span class="white"></span></p>
  </div>
  <div class="flex-col">
    <p>€ <span class="white"></span></p>
  </div>
  <div class="flex-col">
    <p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
  </div>
</div>

<div class="flex-row tabcosti2">
  <div class="flex-col justify">
    <div class="flex-row">
      <p class="margin-left">€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
    </div>
    <div class="flex-row">
      <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
    </div>
    <div class="flex-row">
      <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
    </div>
  </div>
  <div class="flex-col spacer"></div>
</div>

EDIT: with the buttons, try like this:

document.querySelectorAll('button').forEach(function(input) {
  //add change event to each input
  input.onclick = function() {
    //calculation for price here, e.g.:
    var price;
    
    if (this.dataset.value == '3,44') {
      price = 1;
    } else {
      price = 2;
    };

    //output price here
    document.querySelectorAll('.tabcosti .white')[0].innerText = price;
    document.querySelectorAll('.tabcosti .white')[1].innerText = price;
    document.querySelectorAll('.tabcosti .white')[2].innerText = price;
  };
})

body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}

.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

<div class="justify evenly flex-row">
  <div class="flex-col">
    <div class="flex-row">
      <button id="sel" class="btn bottoneCategoria" data-value="1,56" value="3,44">Abbigliamento e Scarpe</button>
    </div>
    <div class="flex-row">
      <button id="sel2" class="btn bottoneCategoria" data-value="1,04" value="2,66">Pet & Food</button>
    </div>
    <div class="flex-row">
      <button id="sel3" class="btn bottoneCategoria" data-value="1,30" value="3,10">Sport e Tempo libero</button>
    </div>
  </div>
  <div class="flex-col">
    <div class="flex-row">
      <button id="sel4" class="btn bottoneCategoria" data-value="1,04" value="2,76">Elettronica e Informatica</button>
    </div>
    <div class="flex-row">
      <button id="sel5" class="btn bottoneCategoria" data-value="1,04" value="2,66">Casa e Cucina</button>
    </div>
    <div class="flex-row">
      <button id="sel6" class="btn bottoneCategoria" data-value="1,30" value="3,10">Auto e Moto</button>
    </div>
  </div>
  <div class="flex-col">
    <div class="flex-row">
      <button id="sel7" class="btn bottoneCategoria" data-value="1,17" value="2,58">Food & Beverage</button>
    </div>
    <div class="flex-row">
      <button id="sel8" class="btn bottoneCategoria" data-value="1,30" value="3,10">Belleza e Salute</button>
    </div>
    <div class="flex-row">
      <button id="sel9" class="btn bottoneCategoria">Altro</button>
    </div>
  </div>
</div>


<div id="demo" class="justify m-30 evenly flex-row bg hide">
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
    </div>
  </div>
</div>

<div class="flex-row bg m-7 justify evenly">
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
    </div>
    <div class="align flex-row">
      <input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
    </div>
  </div>
  <div class="flex-col">
    <div class="align flex-row">
      <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
    </div>
  </div>
</div>


<div class="justify evenly flex-row">
  <div class="flex-col">
    <p>TARIFFA DI GESTIONE</p>
  </div>
  <div class="flex-col">
    <p>TARIFFA DI RESO</p>
  </div>
  <div class="flex-col">
    <p>TARIFFA DI STOCCAGGIO</p>
  </div>
</div>

<div class="tabcosti evenly justify flex-row">
  <div class="flex-col">
    <p id="reso">€ <span class="white"></span></p>
  </div>
  <div class="flex-col">
    <p>€ <span class="white"></span></p>
  </div>
  <div class="flex-col">
    <p>€ <span class="white"></span> <span class="x-small">al mese</span></p>
  </div>
</div>

<div class="flex-row tabcosti2">
  <div class="flex-col justify">
    <div class="flex-row">
      <p class="margin-left">€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
    </div>
    <div class="flex-row">
      <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
    </div>
    <div class="flex-row">
      <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
    </div>
  </div>
  <div class="flex-col spacer"></div>
</div>