Surface Are

HTML

<div id="Text">Please do not leave any box empty. If you dont have sixes, please enter a zero in the input box</div><br>

<form method="post">
    <label for="the_input_id1">Wall 1 Height: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id1" value="meters" size="10px" />
    
    <label for="the_input_id2">Wall 1 Width: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id2" value="meters" size="10px" /><br><br>
    
    <label for="the_input_id3">Wall 2 Height: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id3" value="meters" size="10px" />
    
    <label for="the_input_id4">Wall 2 Width: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id4" value="Name" size="10px" /><br><br>
    
    <label for="the_input_id5">Wall 3 Height: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id5" value="meters" size="10px" />
    
    <label for="the_input_id6">Wall 3 Width: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id6" value="meters" size="10px" /><br><br>
    
    <label for="the_input_id7">Wall 4 Height: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id7" value="meters" size="10px" />
    
    <label for="the_input_id8">Wall 4 Width: </label><input onfocus="if(this.value == 'meters'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='meters';}" id="the_input_id8"...

JavaScript

$(function() {
    var output_element1 = $('#output_ele1');
    var output_element2 = $('#output_ele2');
    var output_element3 = $('#output_ele3');
    var output_element4 = $('#output_ele4');
    var output_element5 = $('#output_ele5');
    var output_element6 = $('#output_ele6');
    var output_element7 = $('#output_ele7');
    var output_element8 = $('#output_ele8');
    var output_element9 = $('#output_ele9');
    var output_element10 = $('#output_ele10');
    var output_element11 = $('#output_ele11');
    var output_element12 = $('#output_ele12');
    var output_element13 = $('#output_ele13');
    var output_element14 = $('#output_ele14');
    var output_element15 = $('#output_ele15');
    var output_element16 = $('#output_ele16');
     var output_element17 = $('#output_ele17');
    var output_element18 = $('#output_ele18');
    var output_element19 = $('#output_ele19');
    var output_element20 = $('#output_ele20');
    var output_element21 = $('#output_ele21');
    var output_element22 = $('#output_ele22');
    var output_element23 = $('#output_ele23');
    var output_element24 = $('#output_ele24');
    
    $('#the_input_id1').keyup(function() {  
        updateTotal();});
    $('#the_input_id2').keyup(function() {  
        updateTotal();});
    $('#the_input_id3').keyup(function() {  
        updateTotal();});
    $('#the_input_id4').keyup(function() {  
        updateTotal();});
    $('#the_input_id5').keyup(function() {  
        updateTotal();});
    $('#the_input_id6').keyup(function() {  
        updateTotal();});
    $('#the_input_id7').keyup(function() {  
        updateTotal();});
    $('#the_input_id8').keyup(function() {  
        updateTotal();});
    $('#the_input_id9').keyup(function() {  
        updateTotal();});
    $('#the_input_id10').keyup(function() {  
        updateTotal();});
    $('#the_input_id11').keyup(function() {  
        updateTotal();});
    $('#the_input_id12').keyup(function() {  
        updateTotal();});
   ...