How to make 2 of the calculator on one page?

There is code:
Card
//here you can change the prices
var costs = {
 'calc-disign-visit': 5200,
 'calc-domain-visit': 500, 
 'calc-hosting-visit': 500,
 'calc-logo-visit': 500,
 'calc-form-visit': 500,
 'calc-cms-visit': 2500,
 'calc-slider-visit': 1000,
 'calc-adapt-visit': 1500,
 'calc-favicon-visit': 0
}

var overallCost = 0;

writeCost function(cost) {
 var costField = document.getElementById("final-price-visit");
 costField.innerHTML = cost;
}

jQuery(function ($) {
 $("#calc-visit").submit(function (e) {
e.preventDefault();
sendForm();
});

})

function sendForm() {
 var formData = new FormData($('#calc-visit')[0]);
$.ajax({
 type: "POST",
 processData: false,
 contentType: false,
 url: "calc-send-visit.php",
 data: formData,
 beforeSend: function () {
$('#loading-visit').removeClass('hidden');
},
 complete: function () {
$('#loading-visit').addClass('hidden');
},
 success: function (data) {
 $(".sent-visit")[0].style.display = 'block';
$("#calc-visit")[0].reset();
}

})
}

countCost function() {
 var currCost = this.getAttribute('id');
if(this.checked)
 overallCost += costs[currCost];
 else 
 overallCost -= costs[currCost];
writeCost(overallCost);
}


window.onload = function() {
 var cboxes = document.querySelectorAll(".calc-form input[type='checkbox']");//if the form class change, there are also need to change
 for (var i=0; i<cboxes.length; i++) { cboxes[i].checked="false;" cboxes[i].onclick="countCost;" } }< code></cboxes.length;>
and <div class="spoiler"><b class="spoiler_title">Landing</b><div class="spoiler_text"><pre><code>//here you can change the prices var costs = { 'calc-disign-landing': 4200, 'calc-domain-landing': 500, 'calc-hosting-landing': 500, 'calc-logo-landing': 500, 'calc-form-landing': 500, 'calc-cms-landing': 2500, 'calc-slider-landing': 1000, 'calc-adapt-landing': 1500, 'calc-favicon-landing': 0 } var overallCost = 0; writeCost function(cost) { var costField = document.getElementById("final-price-landing"); costField.innerHTML = cost; } jQuery(function ($) { $("#calc-landing").submit(function (e) { e.preventDefault(); sendForm(); }); }) function sendForm() { var formData = new FormData($('#calc-landing')[0]); $.ajax({ type: "POST", processData: false, contentType: false, url: "calc-send-landing.php", data: formData, beforeSend: function () { $('#loading-landing').removeClass('hidden'); }, complete: function () { $('#loading-landing').addClass('hidden'); }, success: function (data) { $(".sent-landing")[0].style.display = 'block'; $("#calc-landing")[0].reset(); } }) } countCost function() { var currCost = this.getAttribute('id'); if(this.checked) overallCost += costs[currCost]; else overallCost -= costs[currCost]; writeCost(overallCost); } window.onload = function() { var cboxes = document.querySelectorAll(".calc-form input[type='checkbox']");//if the form class change, there are also need to change for (var i=0; i<cboxes.length; i++) { cboxes[i].checked="false;" cboxes[i].onclick="countCost;" } }< code></cboxes.length;></code></pre></div></div><classname>when calling 2 calculators works only the last one called.</code>
June 26th 19 at 13:57
0 answer

Find more questions by tags jQueryJavaScript