I have created a calculator I use for counting carbs for my 7 y/o type 1 diabetic but as I add more values into my array the page is getting too long. 

I'm looking for a way to start with a single select for the food name then select the weight and it calculates the carbs. Then have a button to dynamically add another row to the form in order to select a new food item and calculate the results of any further additions. 

This is my functional code base:

```
<html><head>
<meta name = "viewport"  content = "initial-scale = 1.0, user-scalable = no">
<title>Carb Calculator</title>
<style>
    #container{width: 200px; margin: 0 auto;}
    label { font-size:20px; display: inline-block; width: 45%; text-align: right;}
    input[type="text"][disabled] {width: 12%; background-color: white;  color: black; font-weight: bolder;}
    input[type="button"] {}
    select {width: 15%}
</style></head>
<body>
<script language="javascript" type="text/javascript">
var myArray = [['Banana',0.1428571429], ['Blackberry',0.1], ['Blueberry',0.1418918919], ['Carrots',0.09836065574],  ['Cantaloupe',0.08],    ['Cherry Tomato',0.05882352941],    ['Cucumber',0.03653846154],     ['Green apple',0.1373626374],   ['Honeydew',0.09],  ['Pear',0.15],  ['Raspberry',0.12], ['Plum',0.11],  ['Strawberry',0.075],   ['Watermelon',0.075]];
function reset(){
   var t=0;
   for (var i=0; i<myArray.length; i++) {
     var v = "val"+i;
     document.calc.elements[v].value=0;
    }
  }
  function calculate(){
    var t=0;
    var tt=0;
    for (var i=0; i<myArray.length; i++) {
        var v = "val"+i;
        var a = "answer"+i;
        if(isNaN(parseInt(document.calc.elements[v].value))) {
            //document.calc.elements[a].value="";
        } else {
            tt=(parseInt(document.calc.elements[v].value))* myArray[i][1]; 
            document.calc.elements[a].value=tt.toFixed(1);
            t+=tt;
        }
    }    
    document.calc.answerTot.value=(t).toFixed(1)        
}        
document.write("<form name=\"calc\" action=\"post\">");
for (var i=0; i<myArray.length; i++) {
    var vv = "val"+i;
    var aa = "answer"+i;
    document.write("<label>"+myArray[i][0]+":</label> <select name=\""+ vv +"\" onchange=\"calculate()\" >");
    for (var j=0; j<301; j++) {
      document.write("<option value=" +j+ ">" +j+ "</option>");
    }
    document.write("</select><input type=text name=" +aa+ " size=5  placeholder=\"Carbs\" disabled><br>");
}
    document.write("<br><label for=\"answerTot\">Total carbs: </label> <input type=text name=answerTot size=5 disabled></br></br> <div style=\"text-align:center\">  <input type=button value=Calculate onClick=\"calculate()\"></br></br><input type=button value=Reset onClick=\"reset()\"></div>");
    </script></body></html>

```