JSFiddle - React, Tailwind, and code Playground

HTML

<form name="addValue">
        <table id="countit" border="1px">
            <tr>
       <td><input type="checkbox" name="choice"/></td>
        <td>Some value</td>
        <td>Some value</td>
                <td class="count-me">12</td>

            </tr>
            <tr>
        <td><input type="checkbox" name="choice"/></td>
        <td>Some value</td>
        <td>Some value</td>
                <td class="count-me">2</td>

            </tr>
            <tr>
        <td>
        <input type="checkbox" name="choice"/></td>
        <td>Some value</td>
        <td>Some value</td>
                <td class="count-me">17</td>

            </tr>
        </table>
    </form>
    <button onclick="myFunction()">Click me</button>

JavaScript

myFunction = function()
    {
            var tds = document.getElementsByName('choice');
            var values = document.getElementsByClassName('count-me');


            var sum = 0;
            
            for(var i = 0; i < tds.length; i ++) {
            	console.log(tds[i]);
                if(tds[i].checked){
                sum+= parseInt(values[i].innerHTML);
                }
                
                }
               
     document.getElementById('countit').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>'; 
    }