I have a program on a website that creates a graphic visual of 2 circles based on user input from a formidable forms calculator. I am using the field value on the actual webpage to create the size of the circle. Currently, the moment the user inputs the Pipe Outer Diameter and Wall thickness, the graphic instantly displays an inner and outer circle and works fine. However, after hitting the submit/calculate button for the formidable forms calculator, the circles no longer update dynamically and I have to refresh the page to get them to work again. Also, I have the form setup using Ajax and on each submission/calculation. Is this a formidable forms issue or a Javascript issue? How do I fix this?
Here is a link to the code that I have on jsFiddle that is the same except I am not using formidable form field keys as inputs.

jsFiddle: https://jsfiddle.net/Kaevonz/6rc9jbo3/109/<a href="https://jsfiddle.net/Kaevonz/6rc9jbo3/109/</a><a" rel="nofollow"><a 

Webpage: https://schallertenterprises.com/cutter-travel-calculator/

jQuery code from actual webpage:

Start your code here<script>jQuery(document).ready(function( $ ){

    $(function() {


  $('.circle').hide();


  $('#field_wg4s2').on('change', function() {


    var $field_wg4s2 = parseFloat($("#field_wg4s2").val()).toFixed(3);


    var $converted = ($field_wg4s2 * 3).toFixed(3);

if ($field_wg4s2 > 85) {
$("#error").text($field_wg4s2 + " is too big").show();
return false;
}

if ($field_wg4s2 < 0) {
$('#error').text('Please input positive integers').show();
return false;
}

console.log($field_wg4s2 , $converted);
$('.circle').css({
height: (2 * $converted),
width: (2 * $converted),
top: "calc(50% - " + ($converted) + "px)",
left: "calc(50% - " + ($converted) + "px)"
});
$('.circle').fadeIn(300);
$('#error').hide();
})

$('.circle2').hide();
$('#field_d6hwp').on('change', function() {
var $field_wg4s2 = parseFloat($("#field_wg4s2").val()).toFixed(3);
var $field_d6hwp = parseFloat($("#field_d6hwp").val()).toFixed(3);
var $converted_2 = (($field_wg4s2 * 3) - (2*($field_d6hwp * 3))).toFixed(3);

if ($field_wg4s2 > 85) {
$("#error")
return false;
}

if ($field_d6hwp < 0) {
$('#error').text('Please input positive integers').show();
return false;
}

if ($field_d6hwp >= 0.33 * $field_wg4s2) {
$('#error').text('Wall Thickness invalid').show();
return false;
}

console.log($field_d6hwp, $converted_2);
$('.circle2').css({
height: (2 * $converted_2),
width: (2 * $converted_2),
top: "calc(50% - " + ($converted_2) + "px)",
left: "calc(50% - " + ($converted_2) + "px)"
});
$('.circle2').fadeIn(300);
$('#error').hide();
})
});

});

</script>