How should I create a JS file for my HTML

I have this HTML from which is an order/purchase for of Coffee Beverages, I used some of the products from starbucks. I also used the sizes they offer for each product.

This HTML file needs an external JS file in order for it to work. I was able to make the JS file but I wasn’t even close to making it work. I’ve already double-checked the names/id’s which matches everything that is in the HTML file.

By the looks of the HTML file, how should I make the proper JS file for it. I really need to make this for my school work.

<!DOCTYPE html>
<head>
    <title>TESTMK1</title>
        <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow" href="style.css">
        <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow" href="style2.css">
        <script type="text/javascript" src="computation.js"></script>
</head>
    <body>
        <div id="form">
        <fieldset>
            <legend class="wrap">
                <h2>TESTMK1</h2>
            </legend>
            <h3>TESTMK1</h3>
            <div class="content">
            <div class="left">
            Item Name:  
            </div>
            <div class="right">
            <select id="itemDesc">
                <option selected disabled="disabled">SELECT AN ITEM</option>
                <option>Caffe Americano</option>
                <option>Caffe Latte</option>
                <option>Cappuccino</option>
                <option>Espresso</option>
                <option>Flat White</option>
            </select>
            </div>
            </div>

            <div class="content">
                <div class="left">
                    Item Size:
                </div>
                <div class="right">
                <select id="itemSize">
                    <option selected disabled="disabled">SELECT SIZE</option>
                    <option>TALL</option>
                    <option>GRANDE</option>
                    <option>VENTI</option>
                </select>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <div class="content">
                <div class="left">
                    Quantity:
                </div>
                <div class="right">
                    <input type="text" id="itemQty">
                </div>
            </div>
        </fieldset>
        <fieldset>
            <div class="content">
                <div class="left">
                    Price:
                </div>
                <div class="right">
                    <input type="text" id="subTtl" disabled="disabled">
                </div>
            </div>
        </fieldset>
        <div class="btnContent">
            <input type="button" value="ADD ITEM" onclick="AddItem()" style="background-color: grey; margin: 3px; border-radius: 5px;">
        </div>
        <div class="btnContent">
            <input type="button" value="NEW TRANSACTION" onclick="NewTransac(document.getElementByID('itemName'),document.getElementByID('itemQty'),document.getElementByID('subTtl'))" style="background-color: grey; margin: 3px; border-radius: 5px;">
        </div>
                <div class="btnContent" style="width: 200px; padding-top: 3px;">
                    Total Price:
                    <input type="text" id="TotalPrice" disabled="disabled">
                </div>
                <div class="btnContent" style="width: 200px; padding-left: 15px; padding-top: 3px;">
                    Enter Payment:
                    <input type="text" id="payment">
                    <input type="button" value="SUBMIT PAYMENT" onclick="Payment()" style="background-color: grey; margin: 3px; border-radius: 5px;">
                </div>
                <div class="btnContent" style="width: 200px; padding-top: 3px;">
                    Change:
                    <input type="text" id="change" disabled="disabled">
                </div>
        </div>

        <div id="form2">
                <div class="content">
                    <div>
                        <p align="left">Item Name</p>
                        <textarea cols="40" rows="5" class="inline-txtarea" id="itName" disabled="disabled">

                        </textarea>
                    </div>
                    <div>
                        <p align="left">Price</p>
                        <textarea cols="40" rows="5" class="inline-txtarea" id="price" disabled="disabled">

                        </textarea>
                    </div>
                    <div>
                        <p align="left">Quantity</p>
                        <textarea cols="40" rows="5" class="inline-txtarea" id="qty" disabled="disabled">

                        </textarea>
                    </div>
                </div>
        </div>
    </body>

<script>

    var TotalPrice=0;

        function chooseItem()
        {

            var itemPrice = parseInt(0);
            var itemName = document.getElementById('itemName').value;
            var itemSize = document.getElementById('itemSize').value;
            var qty = document.getElementById('itemQty').value.trim();
            var subTotal = document.getElementById('subTtl').value;



            if (qty!="")
            {
                if (qty.match(/^[0-9]+$/))
                {
                    if(itemName=="Caffe Latte")
                    {
                        if(itemSize=="Tall")
                            itemPrice = (75*qty);
                        else if(itemSize=="Grande")
                            itemPrice = (105*qty);
                        else(itemSize=="Venti")
                            itemPrice = (135*qty);
                    }
                    if(itemName=="Caffe Americano")
                    {
                        if(itemSize=="Tall")
                            itemPrice = (80*qty);
                        else if(itemSize=="Grande")
                            itemPrice = (100*qty);
                        else(itemSize=="Venti")
                            itemPrice = (120*qty);
                    }
                    if(itemName=="Cappuccino")
                    {
                        if(itemSize=="Tall")
                            itemPrice = (70*qty);
                        else if(itemSize=="Grande")
                            itemPrice = (95*qty);
                        else(itemSize=="Venti")
                            itemPrice = (120*qty);
                    }
                    if(itemName=="Espresso")
                    {
                        if(itemSize=="Tall")
                            itemPrice = (85*qty);
                        else if(itemSize=="Grande")
                            itemPrice = (105*qty);
                        else(itemSize=="Venti")
                            itemPrice = (125*qty);
                    }
                    if(itemName=="Flat White")
                    {
                        if(itemSize=="Tall")
                            itemPrice = (75*qty);
                        else if(itemSize=="Grande")
                            itemPrice = (100*qty);
                        else(itemSize=="Venti")
                            itemPrice = (125*qty);
                    }

                }
                document.getElementById("subTtl").value = itemPrice;

                TotalPrice+=itemPrice;

                    if(itemName=="Caffe Latte")
                        {
                            document.getElementById('itemName').value += "/n" + "Caffe Latte" ;
                            document.getElementById('price').value += "/n" + itemPrice;
                            document.getElementById('qty').value +=  "/n" + qty;
                            document.getElementById('TotalPrice').value = TotalPrice;
                        }
                    else if(itemName=="Caffe Americano")
                        {
                            document.getElementById('itemName').value += "/n" + "Caffe Americano" ;
                            document.getElementById('price').value += "/n" + itemPrice;
                            document.getElementById('qty').value +=  "/n" + qty;
                            document.getElementById('TotalPrice').value = TotalPrice;
                        }
                    else if(itemName=="Cappuccino")
                        {
                            document.getElementById('itemName').value += "/n" + "Cappuccino" ;
                            document.getElementById('price').value += "/n" + itemPrice;
                            document.getElementById('qty').value +=  "/n" + qty;
                            document.getElementById('TotalPrice').value = TotalPrice;
                        }
                    else if(itemName=="Espresso")
                        {
                            document.getElementById('itemName').value += "/n" + "Espresso" ;
                            document.getElementById('price').value += "/n" + itemPrice;
                            document.getElementById('qty').value +=  "/n" + qty;
                            document.getElementById('TotalPrice').value = TotalPrice;
                        }
                    else
                        {
                            document.getElementById('itemName').value += "/n" + "Flat White" ;
                            document.getElementById('price').value += "/n" + itemPrice;
                            document.getElementById('qty').value +=  "/n" + qty;
                            document.getElementById('TotalPrice').value = TotalPrice;
                        }
                    }
                    else
                        alert("Invalid Quantity!!");
                }
                else
                    alert("Please Enter Quantity!!");


function Payment()
{
    var payment = document.getElementById('paymnet').value.trim();
    var TotalPrice = document.getElementById('TotalPrice').value;

    if (payment !="")
    {
        if (payment.match(/^[0-9]+$/))
        {
            if (TotalPrice < payment)
            {
                var change = payment - TotalPrice;

                document.getElementById('change').value= "Php" + change + ".00";
                TotalPrice=0;
            }
            else
                alert("Invalid Amount Entered!!");
        }
        else
            alert("Invalid Amount Entered!!");
    }
    else
        alert("Please Entered!!");
}

function NewTransaction(targ1,targ2,targ3)
{
    var OK = confirm("Are you sure you want to make New Transaction? /n OK or CANCEL? ");

    if (OK==true)
        targ1.value="";
        targ2.value="";
        targ3.value="";
        TotalPrice=0;
        document.getElementById('itemName').value ="";
        document.getElementById('price').value ="";
        document.getElementById('itemQty').value ="";
        document.getElementById('TotalPrice').value ="";
        document.getElementById('payment').value="";
        document.getElementById('change').value="";
}

</script>