<script>
function calcP () {
var precio = 0;

costo = document.getElementById('costo').innerHTML;
uti = document.getElementById('utilidad').innerHTML;

precio = ((parseFloat(uti)/100)*costo) + parseFloat(costo);

document.getElementById('precio').innerHTML = precio;
}

function calcU () {
var  uti;

costo = document.getElementById('costo').innerHTML;
precio = document.getElementById('precio').innerHTML;

uti = ((parseFloat(precio)-costo) / parseFloat(costo)*100);

document.getElementById('utilidad').innerHTML = uti;
}
</script>

<div class="top-row">
    <div class="field-wrap">
        <label class="active1">
            Cost product<span class="req">*</span>
        </label>
        <input type="number" onkeyup="calcP();calcU();" step="0.1" id="costo" name="costo" required/>
    </div>
    <div class="field-wrap">
        <label class="active1">
            % Uti: yes=50, no=50% or 0.5
        </label>
        <input type="number" id="utilidad" onkeyup="calcP();" required name="utilidad"/>
    </div>
</div>
<div class="top-row">
    <div class="field-wrap">
    <label class="active1">
        Price product
    </label>
    <input type="number" id="precio" onkeyup="calcU();"  required name="precio" />
</div>
<div class="field-wrap">
    <label class="active1">
        Date price product
    </label>
    <input type="date" id="fecha" name="fecha" required/>
</div>
</div>