JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<form method="post" onsubmit="getval()">
    <table id="products" name="products" class="products">
        <tr class="figures">
            <th>
                <a href="#">
                    <figure>
                        <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">

                        <p></p>
                    </figure>
                </a>
            </th>
            <th>
                <a href="#">
                    <figure>
                        <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">

                        <p></p>
                    </figure>
                </a>
            </th>
            <th>
                <a href="#">
                    <figure>
                        <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">

                        <p></p>
                    </figure>
                </a>
            </th>

            <th>
                <a href="#">
                    <figure>
                        <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">

                        <p></p>
                    </figure>
                </a>
            </th>
            <th>
                <a href="#">
                    <figure>
                        <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">

                        <p></p>
                    </figure>
                </a>
            </th>
            <th>
                <a href="#">
                    <figure>
                        <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">

            ...

JavaScript

function getval() {
    var inputs, index, liste;
    inputs = document.getElementsByTagName('input');
    for (var key = 0; key < inputs.length; key++) {
        var value = inputs[key].value;
        var id = inputs[key].id;
        if (value > 0) liste = liste + id + "-" + value + ";";
    }
    alert(liste.replace("undefined", ""));
}


function mysum() {
    var inputs, index, liste;
    nbbroca = 0;
    inputs = document.getElementsByTagName('input');
    for (var key = 0; key < inputs.length; key++) {
        var value = inputs[key].value;
        if (value > 0) nbbroca += parseInt(value);
    }
    if (nbbroca >= 10) alert(nbbroca);
}

$(":input").bind('change', function() {
    mysum();
});