Font Awesome Bootstrap Checkboxes over Multiple Forms on page

Desired Code Usage: Shopping cart. Customer selects product option via dropdown. 27 forms on page, only one displayed in response to the user select. Showing here div1 and div2 of the 27.

Objective: To use Font-Awesome checkboxes for color choice, standard number input for quantity and pass both to cart.

What Works: Input for the quantities works perfectly for both divs; they perform the math accurately and present order totals on page as designed. The quantities for the 2nd div work perfectly, math and totals presented on screen accurately for the order.

Problem: Div2 checkboxes for color choice. While this code works perfectly with standard format checkboxes, it does not work with Font-Awesome checkboxes. Using Font-Awesome, checking or unchecking the div2 color checkbox applies the result to the div1 element.

HTML, CSS, Javascript: CalcQty1 and CalcQty2 direct to the first and second division, as does "op1" and "op2". The "qty#" sequence is the same for div1 and div2, etc.

Image of Browser

JS FIDDLE. This fiddle shows the action of the checkboxes, although I cannot yet get the fiddle to perform the math as they do in the browser.

The CSS
body {margin:2.0em auto;font-size:1.0em;}
.form1 {display:flex;flex-direction:column;width:80%;margin:2.0em 0;}
.form2 {display:flex;flex-direction:column;width:80%;margin:2.0em 0;}
.a1 {display:flex;align-items:center;justify-content:center;width:100%;}
.b1 {display:flex;justify-content:space-between;align-items:center;width:100%;}
.b2 {display:flex;width:35%;justify-content:center;}
.b3 {display:flex;width:55%;justify-content:center;}
#div1,#div2 {display:flex;justify-content:center;width:16em;}
.wrapper {display:flex;justify-content:space-between;width:34em;}
input {width:90%;text-align:center;border:thin solid #ccc;}
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {font-family:FontAwesome;display:inline-block;font-size:2.2em;}
input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */
input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

The JS

//<![CDATA[  
function calcQty1() {var tmpDescription='';var tmpField='';if (document.op1.qty.value>0) {tmpDescription+='{b}Product Options 01{/b}';  
if (document.op1.qty1.value>0) {tmpField=document.op1.qty1.value;tmpDescription+='{br}Small '+document.op1.qty1.value+' ';  
}  
if (document.op1.qty2.value>0) {tmpField=document.op1.qty2.value;tmpDescription+='{br}Medium '+document.op1.qty2.value+' ';  
}  
if (document.op1.qty3.value>0) {tmpField=document.op1.qty3.value;tmpDescription+='{br}Large '+document.op1.qty3.value+' ';  
}  
if (document.op1.qty4.checked) {tmpField=document.op1.qty4.value;tmpDescription+='{br}Silver '+document.op1.qty4.value+' ';  
}  
if (document.op1.qty5.checked) {tmpField=document.op1.qty5.value;tmpDescription+='{br}Gold '+document.op1.qty5.value+' ';  
}  
document.op1.product.value=tmpDescription;  
}  
for (var i =1; i <=5; i++){var temp=eval('document.op1.qty'+i+'.value');  
if (temp!=""&&!isNaN(temp)){eval('qty'+i+' = parseInt(temp)');  
}else{eval('qty'+i+' = 0');  
}  
}  
document.op1.total.value = qty1 + qty2 + qty3;  
document.op1.threads.value = qty4 + qty5;  
var pricetot = document.op1.total.value;  
if ((pricetot>=100) && (pricetot <=5000)) {document.op1.p.value = (pricetot * 5.4) .toFixed(2);  
}  
if ((pricetot>=5001) && (pricetot <=10000)) {document.op1.p.value = (pricetot * 4.4) .toFixed(2);  
}  
document.op1.price.value = document.op1.totz.value;  
document.op1.perunit.value = (document.op1.p.value/document.op1.total.value) .toFixed(3);  
document.op1.setup.value = (100);  
document.op1.units.value = (document.op1.total.value * 0.15);  
var pr1 = 1*document.op1.p.value;  
var pr2 = 1*document.op1.setup.value;  
document.op1.totz.value=(pr1 + pr2).toFixed(2);  
}  
//<![CDATA[  
function calcQty2() {var tmpDescription='';var tmpField='';if (document.op2.qty.value>0) {tmpDescription+='{b}Product Options 02{/b}';  
if (document.op2.qty1.value>0) {tmpField=document.op2.qty1.value;tmpDescription+='{br}Small '+document.op2.qty1.value+' ';  
}  
if (document.op2.qty2.value>0) {tmpField=document.op2.qty2.value;tmpDescription+='{br}Medium '+document.op2.qty2.value+' ';  
}  
if (document.op2.qty3.value>0) {tmpField=document.op2.qty3.value;tmpDescription+='{br}Large '+document.op2.qty3.value+' ';  
}  
if (document.op2.qty4.checked) {tmpField=document.op2.qty4.value;tmpDescription+='{br}Silver '+document.op2.qty4.value+' ';  
}  
if (document.op2.qty5.checked) {tmpField=document.op2.qty5.value;tmpDescription+='{br}Gold '+document.op2.qty5.value+' ';  
}  
document.op2.product.value=tmpDescription;  
}  
for (var i =1; i <=5; i++){var temp=eval('document.op2.qty'+i+'.value');  
if (temp!=""&&!isNaN(temp)){eval('qty'+i+' = parseInt(temp)');  
}else{eval('qty'+i+' = 0');  
}  
}  
document.op2.total.value = qty1 + qty2 + qty3;  
document.op2.threads.value = qty4 + qty5;  
var pricetot = document.op2.total.value;  
if ((pricetot>=100) && (pricetot <=5000)) {document.op2.p.value = (pricetot * 5.4) .toFixed(2);  
}  
if ((pricetot>=5001) && (pricetot <=10000)) {document.op2.p.value = (pricetot * 4.4) .toFixed(2);  
}  
document.op2.price.value = document.op2.totz.value;  
document.op2.perunit.value = (document.op2.p.value/document.op2.total.value) .toFixed(3);  
document.op2.setup.value = (100);  
document.op2.units.value = (document.op2.total.value * 0.15);  
var pr1 = 1*document.op2.p.value;  
var pr2 = 1*document.op2.setup.value;  
document.op2.totz.value=(pr1 + pr2).toFixed(2);  
}  

The HTML

<body>  
<div class="wrapper">  
<div id="div1">  
<form name="op1" method="post" class="form1">  
<input name="product" value="" type="hidden" />  
<input name="qty" type="hidden" value="1" />  
<input type="hidden" name="units" />  
<input name="price" type="hidden" value="" />  
<div>Enter Quantity</div>  
<div class="a1"><input type="text" name="qty1" value="" onblur="calcQty1()" oninput="calcQty1()" /></div>  
<div class="a1"><input type="text" name="qty2" value="" onblur="calcQty1()" oninput="calcQty1()" /></div>  
<div class="a1"><input type="text" name="qty3" value="" onblur="calcQty1()" oninput="calcQty1()" /></div>  
<div>Sub Total</div>  
<div class="a1"><input id="total" name="total" value="" readonly type="text" /></div>  
<div class="a1"><input id="perunit" name="perunit" value="" readonly type="text" /></div>  
<div class="a1"><input id="p" name="p" value="" readonly type="text" /></div>  
<div style="display:flex;flex-direction:column;">  
<div>Choose up to 2 colors</div>  
<div class="b1"><div class="b2"><input type="checkbox" name="Silver" id="qty4" value="" onclick="calcQty1(); document.op1.qty4.value=1;" onchange="calcQty1(); document.op1.qty4.value=1;"><label for="qty4"></label></div><div class="b3">Silver</div></div>  
<div class="b1"><div class="b2"><input type="checkbox" name="Gold" id="qty5" value="" onclick="calcQty1(); document.op1.qty5.value=1;" onchange="calcQty1(); document.op1.qty5.value=1;"><label for="qty5"></label></div><div class="b3">Gold</div></div>  
<div style="display:flex;flex-direction:column;">  
<div>Color Count, Total Price</div>  
<div class="a1"><input id="threads" name="threads" size="8" value="" readonly oninput="calcQty1()" type="text" /></div>  
<div class="a1"><input id="setup" name="setup" size="8" value="" readonly type="text" /></div>  
<div class="a1"><input id="totz" name="totz" oninput="calcQty1()" size="8" value="" readonly type="text" /></div>  
</div>  
<div><input type="button" onclick="document.location.reload(true)" value="Reset" /></div>  
<div><input type="submit" value="Submit" /></div>  
</div>  
</form>  
</div>  
<div id="div2">  
<form name="op2" method="post" class="form2">  
<input name="product" value="" type="hidden" />  
<input name="qty" type="hidden" value="1" />  
<input type="hidden" name="units" />  
<input name="price" type="hidden" value="" />  
<div>Input Quantity</div>  
<div class="a1"><input type="text" name="qty1" value="" onblur="calcQty2()" oninput="calcQty2()" /></div>  
<div class="a1"><input type="text" name="qty2" value="" onblur="calcQty2()" oninput="calcQty2()" /></div>  
<div class="a1"><input type="text" name="qty3" value="" onblur="calcQty2()" oninput="calcQty2()" /></div>  
<div>Sub Total</div>  
<div class="a1"><input id="total" name="total" value="" readonly type="text" /></div>  
<div class="a1"><input id="perunit" name="perunit" value="" readonly type="text" /></div>  
<div class="a1"><input id="p" name="p" value="" readonly type="text" /></div>  
<div style="display:flex;flex-direction:column;">  
<div>Choose up to 2 colors</div>  
<div class="b1"><div class="b2"><input type="checkbox" name="Silver" id="qty4" value="" onclick="calcQty2(); document.op2.qty4.value=1;" onchange="calcQty2(); document.op2.qty4.value=1;"><label for="qty4"></label></div><div class="b3">Silver</div></div>  
<div class="b1"><div class="b2"><input type="checkbox" name="Gold" id="qty5" value="" onclick="calcQty2(); document.op2.qty5.value=1;" onchange="calcQty2(); document.op2.qty5.value=1;"><label for="qty5"></label></div><div class="b3">Gold</div></div>  
<div style="display:flex;flex-direction:column;">  
<div>Color Count, Total Price</div>  
<div class="a1"><input id="threads" name="threads" size="8" value="" readonly oninput="calcQty2()" type="text" /></div>  
<div class="a1"><input id="setup" name="setup" size="8" value="" readonly type="text" /></div>  
<div class="a1"><input id="totz" name="totz" oninput="calcQty2()" size="8" value="" readonly type="text" /></div>  
</div>  
<div><input type="button" onclick="document.location.reload(true)" value="Reset" /></div>  
<div><input type="submit" value="Submit" /></div>  
</div>  
</form>  
</div>  
</div>  
<script defer type="text/javascript">  
(function() {  
var css = document.createElement('link');  
css.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';  
css.rel = 'stylesheet';  
css.type = 'text/css';  
document.getElementsByTagName('head')[0].appendChild(css);  
})();  
</script>  
</body>  

End Note: First, thank you. Second: I did not write the js and am not a programmer. Someone created this for me. I cut and paste. I cannot write JS but hack my way around what I find and I do what I am told. I hope I've done this correctly :-).

/Pat