Store URL: https://6f6084-2.myshopify.com (please see the product page or search the product “brown jacket”)
Pass: door
Hi! Please I want to add a checkbox to my product page, which when checked gives 3 textboxes to write in them and the content of those textboxes go to the cart, I have successfully deployed the checkbox and when checked it gives three textboxes but the problem is that the content in those textboxes isn’t going to the cart. I wrote a code for text boxes in the main-product.liquid file and the javascript code in dt-theme.js file. I will be writing the code down below and please help me find what I have done wrong or If I have pasted the code in the wrong file.
code for textboxes in main-product.liquid below with the form id of the add to cart button (“product-form-template–21570773975329__main”)
<form id="product-form-template--21570773975329__main" action="/cart/add" method="post" enctype="multipart/form-data">
<!-- Your existing product form code -->
<!-- Add this checkbox -->
<input type="checkbox" id="customSizeCheckbox" name="properties[Use custom size]"> Use custom size
<!-- Add these textboxes -->
<div id="customSizeInputs" style="display: none;">
<p class="line-item-property__field">
<label for="bustSize">Bust Size</label><br>
<input type="text" id="bustSize" name="properties[Bust Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">
</p>
<p class="line-item-property__field">
<label for="waistSize">Waist Size</label><br>
<input type="text" id="waistSize" name="properties[Waist Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">
</p>
<p class="line-item-property__field">
<label for="bicepSize">Bicep Size</label><br>
<input type="text" id="bicepSize" name="properties[Bicep Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">
</p>
</div>
</form>
the javascript code pasted in dt-theme.js, below 
document.getElementById('customSizeCheckbox').addEventListener('change', function() {
var customSizeInputs = document.getElementById('customSizeInputs');
if (this.checked) {
customSizeInputs.style.display = 'block';
} else {
customSizeInputs.style.display = 'none';
}
});
Sharing the image of the product page as well
and this is how I have the cart to show the values, (highlighted in red)
Thanks! Would be waiting for your help!