Copy a value based on radio input status - php

Question

I'm creating a WordPress theme in which I need to copy some values to a Gravity Forms page with dynamically populated fields. I'm loading options (air-conditioning power) as an ACF repeater field saved together with price of this particular unit. I need to copy this price based on the checked radio into a static div field plus into a hidden input field so it can be used in the form.
Below is the simple structure I need to achieve and a code I have so far. All I need is to copy the price saved somewhere (can be a PHP varible or anything) to a div (probably by jQuery) and into a hidden field in the same time and change it dynamically based on users choice.
<form class="order" action="<?php echo get_permalink(26); ?>">
<div>
<?php if($power) { ?>
<div class="power">
<?php $power_counter = 1; while(have_rows('power')) { the_row();
$power= get_sub_field('power');
$price = get_sub_field('price');
?>
<input type="radio" name="power" id="power<?php echo $power_counter; ?>" value="<?php echo get_the_title() . ' ' . $power; ?>"<?php if($power_counter == 1) { echo "checked"; }; ?>><label for="power<?php echo $power_counter; ?>"><?php echo $power; ?></label>
<input type="hidden" name="price_wo_vat" id="price<?php echo $power_counter; ?>" value="<?php echo $price; ?>">
<div id="price<?php echo $power_counter; ?>" class="price"><?php echo $price. __(' CZK','klima'); ?></div>
<?php $power_counter++; }; ?>
</div>
<?php }; ?>
<input type="number" name="pcs" value="1" min="1" max="99">
<input type="submit" value="<?php _e('Order','klima'); ?>">
</div>

Answer 1

$(document).ready(function() {
var selPrice = parseInt($('#selected_price').val()),
chosenPrice = parseInt($('input[name="power"]:checked').val()),
qty = parseInt($('input[name="pcs"]').val()),
initTotal = calcTotal(chosenPrice, qty);
$('#total').text(initTotal);
$('input[name="pcs"]').on('change', function() {
var myQty = $(this).val(),
chooseQty = parseInt($('input[name="power"]:checked').val()),
newQty = calcTotal(chooseQty, myQty);
$('#total').text(newQty);
});
$('input[name="power"]').on('click', function() {
var myPrice = $(this).val(),
myQty = parseInt($('input[name="pcs"]').val()),
newTotal = calcTotal(myPrice, myQty);
$(this).attr('checked',true);
$('#total').text(newTotal);
});
});
function calcTotal(price, qty) {
var total = price * qty;
return total
}
.power {
margin-bottom: 10px;
}
.total-container {
padding: 5px;
background-color: #DDD;
width: 50px;
margin-bottom: 10px;
}
input[name='pcs'] {
padding: 5px;
text-align: center;
width: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="order" action="#">
<div>
<div class="power">
<!-- #Power 1 -->
<input type="radio" name="power" id="power1" value="62" data-xvat="80" checked="true">
<label for="power1">Option 1 - £62</label>
<br>
<!-- #Power 2 -->
<input type="radio" name="power" id="power2" value="114" data-xvat="160">
<label for="power2">Option 2 - £114</label>
<br>
<!-- #Power 3 -->
<input type="radio" name="power" id="power3" value="139" data-xvat="240">
<label for="power3">Option 3 - £139</label>
<br>
</div>
<div class="total-container">£<span id="total"></span></div>
<input type="hidden" name="selected_price" id="selected_price" value="0">
<input type="number" name="pcs" value="1" min="1" max="99">
<input type="submit" value="Order">
</div>