I am summing-up the data-price attribute for multiple radio buttons and then trying to insert the result into a hidden input field.

I am able to sum up the price-data within the span in my HTML but I just can't get it to insert into the hidden input...

Should I combine both scripts? and if so, how would I do this?

Here is my HTML for reference...

<input type="radio" style="display:none;" id="cdjs" data-price="90" value="2BA" name="prod">
<label for="cdjs">
  <img src="../../images/prod1.png" style="width:42px;">
  <p>Product 1</p>
</label>


<span id="price"></span>


<input type="hidden" id="hiddenprice" name="price" value=''>

Here is my script that sums up the data-price..

function calcPrice() {
  var price = 0;
  $("input[type=radio][data-price]:checked").each(function(i, el) {
    price += +$(el).data("price");
  });
  $("#price").text(price);
}

$("input[type=radio]").on("change", calcPrice);
calcPrice();

and here is my script that should insert the result into the hidden input..

$(function() {
  $('input').change(function() {
    var checked = $(this).find('input[type=radio]:checked');
    $('#price').html(checked.data('price'));
    $('#hiddenprice').val(checked.data('price'));
  }).change();
});