JSFiddle - React, Tailwind, and code Playground

HTML

<form id="pizza3">
        <p>Tamanho da Pizza:</p>
        <select id="tmhpizza">
            <option value="{&quot;preco&quot;:20,&quot;desc&quot;:&quot;R$20,00&quot;}">Brotinho - R$20,00</option>
            <option value="{&quot;preco&quot;:45,&quot;desc&quot;:&quot;R$45,00&quot;}">Pequena - R$45,00</option>
            <option value="{&quot;preco&quot;:70,&quot;desc&quot;:&quot;R$70,00&quot;}">Média - R$70,00</option>
            <option value="{&quot;preco&quot;:95,&quot;desc&quot;:&quot;R$95,00&quot;}">Grande - R$95,00</option>
            <option value="{&quot;preco&quot;:120,&quot;desc&quot;:&quot;R$120,00&quot;}">Gigante - R$120,00</option>
        </select>
        <p>Quantidade de Pizzas:</p>
        <select id="qntpizza" data-rel="tmhpizza">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <p>Tamanho do Refrigerante:</p>
        <select id="tmhrefri">
            <option value="{&quot;preco&quot;:4.5,&quot;desc&quot;:&quot;R$4,50&quot;}">350ml - R$4,50</option>
            <option value="{&quot;preco&quot;:6.3,&quot;desc&quot;:&quot;R$6,30&quot;}">750ml - R$6,30</option>
            <option value="{&quot;preco&quot;:8.1,&quot;desc&quot;:&quot;R$8,10&quot;}">1L - R$8,10</option>
            <option value="{&quot;preco&quot;:9.9,&quot;desc&quot;:&quot;R$9,90&quot;}">2L - R$9,90</option>
            <option value="{&quot;preco&quot;:11.7,&quot;desc&quot;:&quot;R$11,70&quot;}">2,5L - R$11,70</option>
        </select>
        <p>Quantidade de Refrigerante:</p>
        <select id="qntrefri" data-rel="tmhrefri">
            <option...

CSS

div {
    padding: .5em;
}

JavaScript

var calcular = document.getElementById('calcular');
calcular.addEventListener('click', function () {
    var selects = document.querySelectorAll('select[data-rel]');
    var precos = [].map.call(selects, function (select) {
        var multiplicador = parseInt(select.value, 10);
        var json = document.getElementById(select.dataset.rel).value;
        var produto = JSON.parse(json);
        return parseFloat(produto.preco) * multiplicador;
    });
    document.querySelector('input[name="preco"]').value = precos.reduce(function (a, b) {
        return a + b;
    }, 0);
});