<!-- size -->

 		<label style="width: auto; margin-top: 2%;" class="btn btn-default buying-selling border_radio espacamento_tipo">
                <input type="radio" required value="size " name="size []" id="option1" autocomplete="off" style="width: auto" placeholder="' . $price_size . '">

               <span class="buying-selling-word" style="overflow: visible">' . $size . '</span>
        </label>


            <!-- recording-->

         <label style="width: auto; margin-top: 2%;" class="btn btn-default buying-selling border_radio espacamento_tipo">

			 <input type="radio" required value="recording" name="recording[]" id="option1" autocomplete="off" style="width: auto" placeholder="' . $price_recording . '">

 			<span class="buying-selling-word" style="overflow: visible">' . $recording. '</span>
        </label>




					<!--TOTAL -->

                <div class="col-sm-12 espacamento">
                        <div class="col-md-6" style="float: left">

                                <h4>Total</h4>
                        </div>
                        <div class="col-md-6" style="float: right" id="result">
                                <h4 style="text-align:center" id="total"> </h4>
                       </div>

                </div>



<script>

    //size
    const inputs_size = [...document.querySelectorAll("input[name='size[]']")];
    const res_size = document.getElementById("result");
    const res_price_size = document.getElementById("size_price");

    inputs_size.forEach(x => x.addEventListener("change", () => {

        res_size.innerHTML = ""; //clear the result
        res_price_size.innerHTML = ""; //clear the result

        inputs_size.forEach(y => res_size.innerHTML += y.checked ? y.value + "<br>" : "");
        inputs_size.forEach(y => res_price_size.innerHTML += y.checked ? y.placeholder + "€" + "<br>" : "");

    }));


    //recording
    const inputs_recording = [...document.querySelectorAll("input[name='recording[]']")];
    const res_recording = document.getElementById("result_recording");
    const res_price_recording = document.getElementById("resultado_recording_price");

    inputs_gravacao.forEach(x => x.addEventListener("change", () => {

        res_recording.innerHTML = ""; //clear the result
        res_price_recording.innerHTML = ""; //clear the result

        inputs_recording.forEach(y => res_recording.innerHTML += y.checked ? y.value + "<br>" : "");
        inputs_recording.forEach(y => res_price_recording.innerHTML += y.checked ? y.placeholder + "€" + "<br>" : "");

    }));



    var price = "<?php echo $preco_produto;?>";
    var product_price= parseFloat(price );


    // sum
    var inputs = [...document.querySelectorAll("input[type='radio'")];
    inputs.forEach(x => x.addEventListener("change", () => {

        sum = product_price;
        sum +=  parseFloat(x.placeholder) ;

        document.getElementById("total").innerHTML = parseFloat(sum.toFixed(2)) + "€";

    }));

    document.getElementById("total").innerHTML = parseFloat(sum.toFixed(2)) + "€";


</script>