JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <input type="radio" name="radios" id="price" value="0" checked>
  <label for="price">I'm a base</label>
  <br>
  <input type="radio" name="radios" id="price_1" value="1">
  <label for="price_1">Here by default</label>
  <br>
  <input type="radio" name="radios" id="price_2" value="2">
  <label for="price_2">Here by default 2</label>
  <br>
  <input type="checkbox" name="multiply" id="multiply" value="multiply">
  <label for="multiply">Multiply by 2</label>
  <br>
  <input type="button" id="add" value="Add a radio">
  <br>
  <span class="total">100</span>
</form>

JavaScript

$('#add').on('click', function() {
  if (!$('#price_3').length) {
    $('#multiply').before('<input type="radio" name="radios" id="price_3" value="3"> <label for="price_3">Generated by AJAX</label> <br><br>');
    $(this).remove();
  }
})

$("form").bind("change keyup", "input", function() {
  var price = 100;

  if ($('#price_1').is(':checked')) {
    price += 100;
  };

  if ($('#price_2').is(':checked')) {
    price += 200;
  };
  
  if ($('#price_3').is(':checked')) {
    price += 300;
  };

  if ($('#multiply').is(':checked')) {
    price *= 2;
  };

  $(".total").html(price);
})