Making a simple calculation in table with a variable input from user (number-field)

I'm trying to figure out the best way to make multiple calculations within a table with 1 fixed input and 1 variable input from user.

The table looks like this: Table

My code in HTML looks like this:

<table class="accesspoints">
        <caption>
          Access Points
        </caption>

        <tr>
          <th>Access Point</th>
          <th>Power Draw (Watt)</th>
          <th>PoE port required</th>
          <th>Number installed?</th>
          <th>Power consumption</th>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-pro-max" target="_blank">U7 Pro Max</a>
          </td>
          <td class="powerperdevice">25</td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"></td>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-pro" target="_blank">U7 Pro</a>
          </td>
          <td class="powerperdevice">21</td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"></td>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-pro-wall" target="_blank">U7 Pro Wall</a>
          </td>
          <td class="powerperdevice">22</td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"></td>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-outdoor" target="_blank">U7 Outdoor</a>
          </td>
          <td class="powerperdevice">19</td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="apinstalled" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"></td>
        </tr>
<!-- Total power consumption for Access Points-->
        <tr> 
          <td></td>
          <td></td>
          <td></td>
          <td class="totalpower">Total power consumption:</td>
          <td class=""></td>
        </tr>

      </table>

I'm a little unsure if it'll be possible for me to program this in Javascript to calculate the total power consumption per without having seperate ID's for each line.

So my question: Is it possible to tell Javascript to calculate each line seperately? And then at the end make a sum of all 's?

First time trying to ask a question, so if I wasn't clear, please let me know and I'll try to provide more data.

Thanks in advance!

Solution

I thought I saw this question answered today, I even remember editing the answer but I can't see it now.

However, I have an alternative below so that it doesn't go unanswered.

With a small modification in your table elements, the script below calculates the totals line by line and updates the grand total accordingly.

You may try to run the code snippet below,

        const table = document.getElementsByClassName('accesspoints')[0];
        const grandTotal =  document.getElementsByClassName('grandPowerTotal')[0];
        const inputTotals = document.getElementsByName('total');

        table.addEventListener('input', ({ target }) => {
            const tr = target.closest('tr');
            const [power, count, total] = tr.querySelectorAll('input');
            total.value=power.value * count.value;

            var temp= 0;
            for (i=0; i<inputTotals.length; i++){
                temp += Number(inputTotals[i].value);
            }
            grandTotal.innerText= temp;           
        });

    <table class="accesspoints">
        <caption>
          Access Points
        </caption>

        <tr>
          <th>Access Point</th>
          <th>Power Draw (Watt)</th>
          <th>PoE port required</th>
          <th>Number installed?</th>
          <th>Power consumption</th>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-pro-max" target="_blank">U7 Pro Max</a>
          </td>
          <td class="powerperdevice"><input type="text" name="power" readonly value="25"></td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="count" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"><input type="text" name="total"></td>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-pro" target="_blank">U7 Pro</a>
          </td>
          <td class="powerperdevice"><input type="text" name="power" readonly value="21"></td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="count" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"><input type="text" name="total"></td>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-pro-wall" target="_blank">U7 Pro Wall</a>
          </td>
          <td class="powerperdevice"><input type="text" name="power" readonly value="22"></td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="count" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"><input type="text" name="total"></td>
        </tr>

        <tr>
          <td>
            <a href="https://eu.store.ui.com/eu/en/pro/category/all-wifi/products/u7-outdoor" target="_blank">U7 Outdoor</a>
          </td>
          <td class="powerperdevice"><input type="text" name="power" readonly value="19"></td>
          <td>PoE+</td>
          <td class="numberofdevices"><input type="number" name="count" placeholder="Number installed?"></td>
          <td class="totalpowerperdevice"><input type="text" name="total"></td>
        </tr>
<!-- Total power consumption for Access Points-->
        <tr> 
          <td></td>
          <td></td>
          <td></td>
          <td class="totalpower">Total power consumption:</td>
          <td class="grandPowerTotal">0</td>
        </tr>

      </table>