I’m extremely new to Javascript and coding in general and having trouble with this. This is a book ordering system that calculates the price of an order by multiplying the unit price and quantity when I press . The unit prices and quantity have to be manually typed out in the table. The problem is the javascript function I wrote only worked with the top most row and it does not seem to work with the other rows. Can I know how do I get my function to work with all the other rows on the table?

body{   
    font-family: 'Itim', cursive;
    background-image:url('../images/background.jpg')
}

table{
    border-collapse: collapse;
    width: 90%;
}

tr,td{
    border: 1px solid black;
    padding: 0.5rem;
}

.row{
    text-align: center;
    background: skyblue;
}

.row1 td:nth-child(1) {
    text-align: right;
}

.row1:hover{
    background-color: yellow;
}

.row1 select{
    width: 100%;
}

.row2{
    background: skyblue;
}

input{
    width: 96.5%;
}

input td:nth-child(2,3){
    text-align: left;
}

input[type="number"]{
    text-align: right;
}

 input.price:disabled{
    background: silver;
    border: 2px solid black;
    text-align: right;
    color: black;
}

input[type=button]{
    display: block;
    width: 18%;
    height: 25px;
    text-align: center;
    font-size: 12px;
    margin-right: 0;
    margin-left: auto;
}

input.totalprice{
    background: silver;
    border: 2px solid black;
    display: block;
    text-align: right;
    color:black;
    height: 30px;
    width: 75%;
    margin-left: auto;
    margin-right: 0;
    font-size: 18px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
<html>
    <head>
        <title>Book Ordering System</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<link rel="stylesheet" href="https://stackoverflow.com/questions/72582800/./css/book-oder.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
        <script>
        function calculateTotal(){
   var a = Number(document.getElementById('QTY').value);
   var b = Number(document.getElementById('PPRICE').value);
   var c = a * b;
   var total= document.getElementById('TOTAL');
    total.value=c;
}
        </script>
    </head>
    
    <body>
        <h1>Book Ordering System</h1>
            <table>
                <form action onclick="calculateTotal()">
                <tr class="row">
                    <td><b>No.</b></td>
                    <td><b>Book Tilte</b></td>
                    <td><b>Author</b></td>
                    <td><b>Category</b></td>
                    <td><b>Unit Price</b></td>
                    <td><b>Quantity</b></td>
                    <td><b>Total</b></td>
                </tr>
                <tr class="row1">
                    <td>1</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                        <option disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                        </select>
                     </td>
                     <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td>
                     <td><input type="number" value="0" name="QTY" id="QTY"></td>
                     <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>2</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                          <option disabled selected>Please choose the category...</option>
                          <option value="Business">Business</option>
                          <option value="Fiction">Fiction</option>
                          <option value="Mathematics">Mathematics</option>
                          <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" id="QTY"></td>
                    <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>3</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                            <option disabled selected>Please choose the category...</option>
                            <option value="Business">Business</option>
                            <option value="Fiction">Fiction</option>
                            <option value="Mathematics">Mathematics</option>
                            <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" id="QTY"></td>
                    <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>4</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                             <option disabled selected>Please choose the category...</option>
                             <option value="Business">Business</option>
                             <option value="Fiction">Fiction</option>
                             <option value="Mathematics">Mathematics</option>
                             <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" id="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" id="QTY"></td>
                    <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>5</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td>
                        <select>
                             <option disabled selected>Please choose the category...</option>
                             <option value="Business">Business</option>
                             <option value="Fiction">Fiction</option>
                             <option value="Mathematics">Mathematics</option>
                             <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" id="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" id="QTY"></td>
                    <td><input value="0.00" disabled class="price" name="TOTAL" id="TOTAL"></td>
                </tr>
                <tr class="row2">
                    <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()">
                    </td>
                    <td colspan="2"><input class="totalprice" value="0.00" disabled ></td>
                </tr>
                </form>
            </table>
    </body>
</html>

Palprotein is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your problem occurs because you using id’s for multiple fields on the page. But a id is always unique. If you fetch the fields then you have to iterate over to calculate the row sum.

function calculateTotal(){
  const rows = document.querySelectorAll('.row1');
  console.log(rows)
  rows.forEach(r => {
    const a = Number(r.querySelector('.QTY').value);
    const b = Number(r.querySelector('.PPRICE').value);
    const c = a * b;
    
    r.querySelector('.TOTAL').value = c;
  });   
}
body{   
    font-family: 'Itim', cursive;
    background-image:url('../images/background.jpg')
}

table{
    border-collapse: collapse;
    width: 90%;
}

tr,td{
    border: 1px solid black;
    padding: 0.5rem;
}

.row{
    text-align: center;
    background: skyblue;
}

.row1 td:nth-child(1) {
    text-align: right;
}

.row1:hover{
    background-color: yellow;
}

.row1 select{
    width: 100%;
}

.row2{
    background: skyblue;
}

input{
    width: 96.5%;
}

input td:nth-child(2,3){
    text-align: left;
}

input[type="number"]{
    text-align: right;
}

 input.price:disabled{
    background: silver;
    border: 2px solid black;
    text-align: right;
    color: black;
}

input[type=button]{
    display: block;
    width: 18%;
    height: 25px;
    text-align: center;
    font-size: 12px;
    margin-right: 0;
    margin-left: auto;
}

input.totalprice{
    background: silver;
    border: 2px solid black;
    display: block;
    text-align: right;
    color:black;
    height: 30px;
    width: 75%;
    margin-left: auto;
    margin-right: 0;
    font-size: 18px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
        <h1>Book Ordering System</h1>
            <table>
                <form action onclick="calculateTotal()">
                <tr class="row">
                    <td><b>No.</b></td>
                    <td><b>Book Tilte</b></td>
                    <td><b>Author</b></td>
                    <td><b>Category</b></td>
                    <td><b>Unit Price</b></td>
                    <td><b>Quantity</b></td>
                    <td><b>Total</b></td>
                </tr>
                <tr class="row1">
                    <td>1</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                        <option disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                        </select>
                     </td>
                     <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td>
                     <td><input type="number" value="0" name="QTY" class="QTY"></td>
                     <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>2</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                          <option disabled selected>Please choose the category...</option>
                          <option value="Business">Business</option>
                          <option value="Fiction">Fiction</option>
                          <option value="Mathematics">Mathematics</option>
                          <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input class="price TOTAL" value="0.00" name="TOTAL"  disabled></td>
                </tr>
                <tr class="row1">
                    <td>3</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                            <option disabled selected>Please choose the category...</option>
                            <option value="Business">Business</option>
                            <option value="Fiction">Fiction</option>
                            <option value="Mathematics">Mathematics</option>
                            <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input class="price TOTAL" value="0.00" name="TOTAL"  disabled></td>
                </tr>
                <tr class="row1">
                    <td>4</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                             <option disabled selected>Please choose the category...</option>
                             <option value="Business">Business</option>
                             <option value="Fiction">Fiction</option>
                             <option value="Mathematics">Mathematics</option>
                             <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" step="any" class="PPRICE" id="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>5</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td>
                        <select>
                             <option disabled selected>Please choose the category...</option>
                             <option value="Business">Business</option>
                             <option value="Fiction">Fiction</option>
                             <option value="Mathematics">Mathematics</option>
                             <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" class="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input value="0.00" disabled class="price TOTAL" name="TOTAL" ></td>
                </tr>
                  
                <tr class="row2">
                    <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()">
                    </td>
                    <td colspan="2"><input class="totalprice" value="0.00" disabled ></td>
                </tr>
                </form>
            </table>

function calculateTotal(){
  var total = 0;
  var rows = document.querySelectorAll('.row1');
  var tot = document.querySelector('.totalprice');

  rows.forEach(row => {
    var a = Number(row.querySelector('.QTY').value);
    var b = Number(row.querySelector('.PPRICE').value);
    var c = a * b;
    total =  total + c;
    row.querySelector('.TOTAL').value = c;
  });  
   tot.value = total; 
}
body{   
    font-family: 'Itim', cursive;
    background-image:url('../images/background.jpg')
}

table{
    border-collapse: collapse;
    width: 90%;
}

tr,td{
    border: 1px solid black;
    padding: 0.5rem;
}

.row{
    text-align: center;
    background: skyblue;
}

.row1 td:nth-child(1) {
    text-align: right;
}

.row1:hover{
    background-color: yellow;
}

.row1 select{
    width: 100%;
}

.row2{
    background: skyblue;
}

input{
    width: 96.5%;
}

input td:nth-child(2,3){
    text-align: left;
}

input[type="number"]{
    text-align: right;
}

 input.price:disabled{
    background: silver;
    border: 2px solid black;
    text-align: right;
    color: black;
}

input[type=button]{
    display: block;
    width: 18%;
    height: 25px;
    text-align: center;
    font-size: 12px;
    margin-right: 0;
    margin-left: auto;
}

input.totalprice{
    background: silver;
    border: 2px solid black;
    display: block;
    text-align: right;
    color:black;
    height: 30px;
    width: 75%;
    margin-left: auto;
    margin-right: 0;
    font-size: 18px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
        <h1>Book Ordering System</h1>
            <table>
                <form action onclick="calculateTotal()">
                <tr class="row">
                    <td><b>No.</b></td>
                    <td><b>Book Tilte</b></td>
                    <td><b>Author</b></td>
                    <td><b>Category</b></td>
                    <td><b>Unit Price</b></td>
                    <td><b>Quantity</b></td>
                    <td><b>Total</b></td>
                </tr>
                <tr class="row1">
                    <td>1</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                        <option disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                        </select>
                     </td>
                     <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td>
                     <td><input type="number" value="0" name="QTY" class="QTY"></td>
                     <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>2</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                          <option disabled selected>Please choose the category...</option>
                          <option value="Business">Business</option>
                          <option value="Fiction">Fiction</option>
                          <option value="Mathematics">Mathematics</option>
                          <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input class="price TOTAL" value="0.00" name="TOTAL"  disabled></td>
                </tr>
                <tr class="row1">
                    <td>3</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                            <option disabled selected>Please choose the category...</option>
                            <option value="Business">Business</option>
                            <option value="Fiction">Fiction</option>
                            <option value="Mathematics">Mathematics</option>
                            <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input class="price TOTAL" value="0.00" name="TOTAL"  disabled></td>
                </tr>
                <tr class="row1">
                    <td>4</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><select>
                             <option disabled selected>Please choose the category...</option>
                             <option value="Business">Business</option>
                             <option value="Fiction">Fiction</option>
                             <option value="Mathematics">Mathematics</option>
                             <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" step="any" class="PPRICE" id="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td>
                </tr>
                <tr class="row1">
                    <td>5</td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td>
                        <select>
                             <option disabled selected>Please choose the category...</option>
                             <option value="Business">Business</option>
                             <option value="Fiction">Fiction</option>
                             <option value="Mathematics">Mathematics</option>
                             <option value="Technology">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" class="PPRICE"></td>
                    <td><input type="number" value="0" name="QTY" class="QTY"></td>
                    <td><input value="0.00" disabled class="price TOTAL" name="TOTAL" ></td>
                </tr>
                  
                <tr class="row2">
                    <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()">
                    </td>
                    <td colspan="2"><input class="totalprice" value="0.00" disabled ></td>
                </tr>
                </form>
            </table>

id – is an unique identificator, that means it shouldn’t be used with the same value twice at one page.

In your code your getting only first ‘QTY’ https://stackoverflow.com/”PPRICE” https://stackoverflow.com/”TOTAL’ elements on page (method .getElementById supposed to get only 1 element from page).

Change your ids: ‘QTY”https://stackoverflow.com/”PPRICE”https://stackoverflow.com/”TOTAL’ in to classes.

Then you can query them all and get total for every row:

function calculateTotal(){
  const QTYCll = document.getElementsByClassName('QTY');
  const PPRICECll = document.getElementsByClassName('PPRICE');
  const TOTALCll = [...document.getElementsByClassName('TOTAL')];

  TOTALCll.forEach((total, i) => {
    total.value = QTYCll[i].value * PPRICECll[i].value;
  });
}

3