jQuery sum radio button value and text input value?

Question

as you can see in the code snippit, if i select the radio button 'standard' and submit.. the 'total' value is 'standard + standard' which is '400'.. i just want to achieve a simple output, say for example, if i select 'standard' and submit, the output value should be only 200.. if i select 'custom', then my total value should be '200 + the value i give in text field'.. how to achieve this?

$(document).ready(function(){
  $("div.radio-checked").hide();
    $("input[id$='custom']").click(function() {
        $("div.radio-checked").show();
        $( "#default" ).prop( "checked", false );
    });
    $("input[id$='default']").click(function() {
        $("div.radio-checked").hide();
        $( "#custom" ).prop( "checked", false );
    });
  $("div#pay-options").hide();
    $('#submit').click(function (){
      calculateSum();
      var formKeyValue=null;
       var string="";
       formKeyValue = $('#myForm').serializeArray();
       $(formKeyValue ).each(function(index, obj){
         if(obj.value!=''){
           string = string+"<p>"+obj.name+' : '+obj.value+"</p>";
           $("div#pay-options").show();
         };
      });
       $("#output").html("");
       $("#output").html(string);
    });
});

function calculateSum() {

  var sum = 0;
  $(".price").each(function() {

    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  $("#sum").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post">
  <fieldset>
    <label for="name">Name?</label>
  <input type="text" id="name" name="Name" required>
    </fieldset>
<fieldset>
  <div>
    <input type="radio" value="200" id="default" class="price" required></input>
  <label for="default">Standard</label>
  </div>
  <input type="radio" value="200" id="custom" class="price" required></input>
<label for="custom">Custom</label>
<div class="radio-checked">
  <label for="product-cost">Approximate Cost of the product?</label>
  <input type="number" id="product-cost" name="Product Cost" class="price" data-require-pair="#custom" required>
</div>

</fieldset>

<fieldset>
  <button name="submit" type="submit" id="submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>

<div id="output">

</div>
<div id="pay-options">
  <p>
    Total: <span id="sum"></span>
  </p>
</div>

Answer 1

Firstly, your mark up is not right. All radio buttons should have a common name,radio buttons with the same name belong to the same group.

To achieve the functionality to you have explained you can do something like the following code snippet

$(document).ready(function(){
  $("div.radio-checked").hide();
    $("input[id$='custom']").click(function() {
        $("div.radio-checked").show();
        $( "#default" ).prop( "checked", false );
    });
    $("input[id$='default']").click(function() {
        $("div.radio-checked").hide();
        $( "#custom" ).prop( "checked", false );
    });
  $("div#pay-options").hide();
    $('#submit').click(function (){
      calculateSum();
      var formKeyValue=null;
       var string="";
       formKeyValue = $('#myForm').serializeArray();
       $(formKeyValue ).each(function(index, obj){
         if(obj.value!=''){
           string = string+"<p>"+obj.name+' : '+obj.value+"</p>";
           $("div#pay-options").show();
         };
      });
       $("#output").html("");
       $("#output").html(string);
    });
});

function calculateSum() {
    var sum = 0;
 var selectedVal=$('input:radio[name=pricing]:checked').val();
  alert(selectedVal)
 if(selectedVal==="Standard"){
   sum=200;
 }
 
  else if(selectedVal==="Custom"){
    
  var $prdCost=$("#product-cost");
  var prdPrice=$prdCost.val();
    sum=200+parseFloat(prdPrice);
  }
  alert(sum);
  $("#sum").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post">
  
  <fieldset>
    <label for="name">Name?</label>
  <input type="text" id="name" name="Name" required>
    
   </fieldset>

  <fieldset>
  <div>
    <input type="radio" value="Standard" id="default" name="pricing"   class="price" required>Standard</input>
  </div>
  <div>    
  <input type="radio" value="Custom" id="custom" name="pricing" value="custom" class="price" required>Custom</input>
  </div>


<div class="radio-checked">

  <label for="product-cost">Approximate Cost of the product?</label>
  <input type="number" id="product-cost" name="Product Cost" class="price" data-require-pair="#custom" required>
</div>

</fieldset>

<fieldset>
  <button name="submit" type="submit" id="submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>

<div id="output">

</div>
<div id="pay-options">
  <p>
    Total: <span id="sum"></span>
  </p>
</div>

Hope this helps