How I get the details in cells of table from id's using Javascript function

I have a dropdown list like this:

<select id="itemsList" onchange="gettingList()">
    <option>Please select the option</option>
    <option value="50">Soap</option>
    <option value="100">Sugar</option>
    <option value="290">Oil</option>
</select>
<br><br>

I get the price of the product from the above list. after, clicking the button I unable to get the result.

<input type="number" id="price" disabled="">
<br><br>

<input type="number" id="quantity" onChange="calculate()">
<br><br>

<input type="number" id="result">


<button type="button" onclick="addDetails()">Add</button>

Code for the table

<table id="myTable" border="1">
  <tr>
    <th>Product Name</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Amount</th>
  </tr>
</table>
<br>

For this, I am using this script. But I didn't get the actual result.

<script>
    

    
var getPrice = document.getElementById('itemsList');

function getList () {
    document.getElementById('price').value = getPrice.value;
}


function calculate () {
    var prc = document.getElementById('price').value;
    var qty = document.getElementById('quantity').value;
    var result = prc * qty;
    document.getElementById('bill').value = result;
}



function addDetails () {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1. = document.getElementById('itemsList').value;
    cell2. = document.getElementById('price').value;
    cell3. = document.getElementById('quantity').value;
    cell4. = document.getElementById('bill').value;
}

</script>

How do I get the details in cells of the table? like:

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW