How to get value from select box to table?

Question

Good day, I am stuck at this stage and I don't have enough experience with JavaScript, in the below HTML there's select box include 2 option for phones (phone1 & phone2) and table and button called “Add”
The JavaScript code below have a function called addrow() At this moment I need to get the option I choose from the select box to the table by pressing the button “Add”

eg if I choose phone1 that's mean it supposed to show in the table phone1 + price. and after that if I change my mind and decide to choose phone2 that's mean will hide phone1+price and show phone2+price

and there's “service charge” cost ($10 for both phones) it's supposed to show under phone1 and phone2

eg if I choose phone1 that's mean showing in the table phone1 = first cell + price = second cell and under phone1 cell service charge = third cell and under price cell service charge cost = fourth cell

And the same thing if I choose phone2

phone2 = first cell + price = second cell and under phone2 cell service charge = third cell and under price cell service charge cost = fourth cell

Thanks in advance for the help.

 function addRow() { var table = document.getElementById("table"); var row = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td"); td1.innerHTML = document.getElementById("phone1").value; td2.innerHTML = document.getElementById("txt3").value = '$275'; td3.innerHTML = document.getElementById("phone2").value; td4.innerHTML = document.getElementById("txt4").value = '$100'; row.appendChild(td1);`enter code here` row.appendChild(td2); table.children[0].appendChild(row); }

 <select id="itemType" name="itemType"> <option id="phone1" value="phone1">phone1</option> <option id="phone2" value="phone2">phone2</option> </select> <div id="txt3"></div> <div id="txt4"></div> <input type="button" value="Add" onclick="addRow()" id="add"><br /><br /> <table id="table" border="1"> <tr> <th>Item</th> <th>Cost</th> </tr> </table>

Answer 1

<select id="itemType" name="itemType">
    <option id="phone1" value="phone1">phone1</option>
    <option id="phone2" value="phone2">phone2</option>
</select>

<input type="button" value="Add" onclick="addRow()" id="add"><br /><br />

<table id="table" border="1">
    <tr>
        <th>Item</th>
        <th>Cost</th>
        <th>Service Charge</th>
        <th>Total</th>
    </tr>
    <tr id="ItemDetail"></tr>
</table>

<script type="text/javascript">
    function addRow() {
        let select = document.getElementById("itemType")
        let price = 0
        let serviceCharge = 10
        if(select.value == "phone1"){
            price = 275
        }
        else if(select.value == "phone2") {
            price = 100
        }

        let data = `<td>${select.value}</td>
                    <td>$${price}</td>
                    <td>$${serviceCharge}</td>
                    <td>$${price + serviceCharge}</td>`

        document.getElementById("ItemDetail").innerHTML = select.value ? data : ''
    }
</script>