JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="calc"> Projecto </h2>  

<table id="calculator" class="calc" border="1">
    <tr>
        <th>Tipo</th>
        <th>Qts.</th>
        <th>Dificuldade</th>
        <th>Horas</th>
        <th>Operações</th>
    </tr>
    <tr>
        <td><select name="tipo">
            <option value="0">-Selecione-</option>
            <option value="1">Criteria</option>
            <option value="2">Form</option>
            <option value="3">Página</option>
            <option value="4">Guide</option>
            <option value="5">Matrix</option>
            </select></td>
        <td><select name="qt">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            </select></td>
        <td>
            <select name="diff">
                <option value="0">-Selecione-</option>
                <option value="1">fácil</option>
                <option value="2">simples</option>
                <option value="3">medio</option>
                <option value="4">trabalhoso</option>
                <option value="5">complexo</option>
            </select>
        </td>
        <td class="totalHoras"></td>
        <td> <span class="add">+</span> <span class="remove">-</span></td>
    </tr>
    <tr style="color:#FFF;background:#666;">
        <td>Total de Horas : </td>
        <td class="totaisDeHoras"></td>
        <td>Dias de Trabalho :</td>
        <td class="totaisDeDias"></td>
        <td class="euro"></td>
    </tr>
</table>
<h3 class="calc">Calculadora Powered by Jonathan Fontes...

CSS

table.calc {
    width:500px;  
}

table.calc tr, table.calc td, table.calc th
{
    padding: 2px; 
}

table.calc td, table.calc th
{
    font-family: arial, serif;
    font-size: 10pt; 
}

table.calc th
{
    font-weight: bold;   
}

table.calc tr td select, table.calc tr td input {
    font-family: arial, serif;
    font-size: 9pt;     
}

table.calc tr td input {
    width: 50px;
    text-align: right;
}

.add, .remove {
    width: 20px;
    text-align: center;
    color: white;
    background-color: #404040;
    font-weight:bold;
    display: block;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 20px;
    vertical-align: top;
}

.add:hover, .remove:hover {
    cursor: pointer;
    background-color: #909090;
    color: #000000;
}

h1.calc {
    font-family: calibri, serif;
    font-size: 18pt;
    text-decoration: underline;
    margin-bottom: 20px;
}

h3.calc {
    margin-left: 110px;
    font-size: 8pt;
    color: #909090;
    font-family: arial;
}

h2.calc {
    font-family: calibri, serif;
    font-size: 14pt;
    margin-bottom: 20px;
}

#defs
{
    border: 1px solid gray; 
    padding: 2px;
}

#recalculate
{
    width: 150px;
    text-align:center;
    padding: 2px;
}

JavaScript

$(function() {

    var euroPerHora = val_input('horavalue');
        horasDeTrabalho = val_input('workhours');

    $("table:first select").change(function() {
        var $this = $(this),
            val = $this.val(),
            $tr = $this.closest("tr"),
            $tipo = $tr.find("select[name='tipo']"),
            $qt = $tr.find("select[name='qt']"),
            $diff = $tr.find("select[name='diff']"),
            cal = 0,
            hora = 0,
            diffarr = [];

        if ($qt.val() != 0 && $tipo.val() != 0 && $diff.val() != 0) {
            diffarr = ['easy','simple','medium','work','complex'];
            hora = val_input('type'+$tipo.val()+'simple');
            cal = val_input('type'+$tipo.val()+diffarr[$diff.val()-1]);
            cal = cal * $qt.val();
            $tr.find("td.totalHoras").text(cal);
            $("table:first").find(".euro").text(round_float(getAllHoras() * euroPerHora)+"€");    $("table:first").find(".totaisDeHoras").text(getAllHoras())
            $("table:first").find(".totaisDeDias").text(round_float(getAllHoras() / horasDeTrabalho,2));
        }
        
    });

    function getAllHoras() {
        var $trs = $("table:first").find("td.totalHoras"),
            val = 0;
        $trs.each(function() {
            if ($(this).text() != '') {
                val += parseFloat($(this).text())
            }
        });
        return val;
    }

    function round_float(x, n) {
        if (!parseInt(n)) var n = 0;
        if (!parseFloat(x)) return false;
        return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
    }

    function val_input(elem_name)
    {
        var fl = 0;
        if ($("input[name='"+elem_name+"']").val()!='')   {
           if (parseFloat($("input[name='"+elem_name+"']").val())>0)
           {
              fl = parseFloat($("input[name='"+elem_name+"']").val());
           }
        }
        return fl;
    }
        
    // interecção com a tabela adicionar e remover
   ...