Hello! This is my first post, so I apologize if I'm doing something wrong.

I am currently working on a website redesign and need some help with this messy JavaScript calculator on the website. It is a porcelain and glass tile store that has a calculator for when a customer enters the amount of square footage they need it will tell them how many boxes they need to purchase based on how many square feet come in a box for that particular product. You can see an example of this calculator here: http://www.worldclasstiles.com/porce...orcelain-tile/

I am looking for a better way to set up the calculator. Right now it replaces the "quantity" box with a "boxes needed" output box that allows the customer to add that many boxes to the cart. I just want to take that calculator, make it look much cleaner (maybe even include a button to do the calculation instead of confusing the customer by assuming they will tab through or click out of the box to get the answer), move it to a different area on the product page, and I want to put the quantity box back to normal.

I would like the calculator to be there as a reference for the customer if they need it, but not to be part of the "add to cart process."

Thank you for any help you can give me. I will attach the calculator code below.

 <div class="boxproductcontainer">
                    <span class="label">ft<sup>2</sup> needed:</span>
                    <span class="value"><input type="text" id="needed" onChange="calculate();"></span>
                    <span class="label" style="margin-left:1em;">ft<sup>2</sup> / box:</span>
                    <span class="value" id="box">&nbsp;</span>
                <script type="text/javascript">
                    $(document).ready( function() {
                    /* changes quantity input label text */
                    $("div.Label:contains('Quantity:')").text('Boxes Needed:'); 
                    /* adds class 'boxeslabel' to quantity input label */ 
                    $("div.Label:contains('Boxes Needed:')").addClass('boxeslabel'); 
                    /* inserts HTML after quantity input label */
                    $(".boxeslabel").after('<input type="text" id="boxneed" onChange="entry();"><span class="label" style="margin-left:1em;">actual ft<sup>2</sup>:</span><span class="value" id="actual" style="font-weight:500;margin-bottom:1em;">&nbsp;</span>'); 
                    /* hides quantity input */
                    /* gets 'sku' square feet per box */
                    var $sqftbox = document.getElementById('sqftsku').innerHTML;
                    /* removes product id */
                    var $sqftbox = $sqftbox.replace('%%GLOBAL_ProductId%%','');
                    /* removes extra 0s */
                    var $sqftbox = parseFloat($sqftbox).toFixed(2);
                    /* displays square feet per box */
                    document.getElementById('box').innerHTML = $sqftbox;
                    function calculate() {
                    var box = document.getElementById('box').innerHTML;
                    var need = document.getElementById('needed').value;
                    var orderqty = Math.ceil(need/box);
                    var actual = (box*orderqty);
                    document.getElementById('boxneed').value = orderqty;
                    document.getElementById('text_qty_').value = orderqty;
                    document.getElementById('actual').innerHTML = actual;
                    function entry() {
                    var entryqty = document.getElementById('boxneed').value;
                    var box = document.getElementById('box').innerHTML;
                    document.getElementById('text_qty_').value = entryqty;