How do I make a 'submit' option on a form that has an unlimited number of inputs?

Question

I am trying to create a 'calculator' where you can add the amount of inputs as well, so you can enter as many as you wish. On submit, it should display the added value of all inputs - however, I can only get it to show the value of the last input. Also I wish to times the value of x input by the amount of x input, written into the number input - how do I go about doing that?

var prices= new Array();
prices["none"]=0;
prices["burger"]=10;
prices["fish"]=20;
prices["steak"]=30;

var i = 0;

function createInput() {
    i++;
    
    var container = document.getElementById("newInputs");
    
    var select = document.createElement("select");
    select.setAttribute("id", "select" + i);
    container.appendChild(select);
    
    var none = document.createElement("option");
    none.setAttribute("value", "none");
    none.text = "";
    select.add(none);
    
    var one = document.createElement("option");
    one.setAttribute("value", "burger");
    one.text = "Burger";
    select.add(one);
    
    var two = document.createElement("option");
    two.setAttribute("value", "fish");
    two.text = "Fish";
    select.add(two);
    
    var three = document.createElement("option");
    three.setAttribute("value", "steak");
    three.text = "Steak";
    select.add(three);
    
    var amount = document.createElement("input");
    amount.setAttribute("id", "amount" + i);
    amount.setAttribute("type", "number")
    container.appendChild(amount);
    
    return i;
}

function getPrice() {
    var price = 0;
    var theForm = document.forms["form"];
    var items = theForm.elements["select" + i];
    price = prices[items.value];
    return price;
}

function getTotal() {
    var totalPrice = getPrice();
    document.getElementById('total').innerHTML = "£" + totalPrice;
}

<form id="form">
        <select id="select0">
            <option value="none"></option>
            <option value="burger">Burger</option>
            <option value="fish">Fish</option>
            <option value="steak">Steak</option>
        </select>
        <input type="number" id="amount1">
        <div id="newInputs">
        
        </div>
        <input type="button" onclick="createInput()" value="More Inputs!">
        <input type="button" onclick="getTotal()" value="Submit!">
    </form>
    <p id="total">You haven't got a total yet</p>

It's probably a really silly mistake I'm making but thanks for helping anyway!

Answer 1

Check this out ~

var prices= new Array();
prices["none"]=0;
prices["burger"]=10;
prices["fish"]=20;
prices["steak"]=30;

var i = 0;

function createInput() {
    i++;
    
    var container = document.getElementById("newInputs");
    
    var select = document.createElement("select");
    select.setAttribute("id", "select" + i);
    container.appendChild(select);
    
    var none = document.createElement("option");
    none.setAttribute("value", "none");
    none.text = "";
    select.add(none);
    
    var one = document.createElement("option");
    one.setAttribute("value", "burger");
    one.text = "Burger";
    select.add(one);
    
    var two = document.createElement("option");
    two.setAttribute("value", "fish");
    two.text = "Fish";
    select.add(two);
    
    var three = document.createElement("option");
    three.setAttribute("value", "steak");
    three.text = "Steak";
    select.add(three);
    
    var amount = document.createElement("input");
    amount.setAttribute("id", "amount" + i);
    amount.setAttribute("type", "number")
    container.appendChild(amount);
    
    return i;
}

function getPrice() {
    var price = 0, ix, ixLen, value, type;
    var newInputs = document.getElementById('newInputs');
    
    price += (prices[document.getElementById('select0').value || 'none']) *     
             (document.getElementById('amount0').value || 0);
    for(ix = 0, ixLen = newInputs.children.length; ix < ixLen; ix += 2){
        type = newInputs.children[ix].value || 'none';
        value = newInputs.children[ix+1].value || 0;
        price += prices[type] * +value;
    }
    
    return price;
}

function getTotal() {
    var totalPrice = getPrice();
    document.getElementById('total').innerHTML = "£" + totalPrice;
}

<form id="form">
	<select id="select0">
		<option value="none"></option>
		<option value="burger">Burger</option>
		<option value="fish">Fish</option>
		<option value="steak">Steak</option>
	</select>
	<input type="number" id="amount0">
	<div id="newInputs">
	
	</div>
	<input type="button" onclick="createInput()" value="More Inputs!">
	<input type="button" onclick="getTotal()" value="Submit!">
</form>
<p id="total">You haven't got a total yet</p>