JSFiddle - React, Tailwind, and code Playground

by kapik

HTML

<table border=1 cellspadding=0 cellspacing=0>
    <tr>
        <td>Ingrédient 1</td>
        <td>Ingrédient 2</td>
        <td>Ingrédient 3</td>
        <td>Ingrédient 4</td>
    </tr>
    <tr>
        <td><input data-pct="1" type="text" value="150" size="4" /></td>
        <td><input data-pct="0.33" type="text" value="50" size="4" /></td>
        <td><input data-pct="8.2" type="text" value="41" size="4" /></td>
        <td><input data-pct="0.6" type="text" value="3" size="4" /></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

JavaScript

$(function(){

    $('input').keyup(function(){
    
        var val = $(this).val();
        var pct = $(this).attr('data-pct');
        
        $('input').not($(this)).each(function(){
        
            $(this).val((($(this).attr('data-pct')*val)/pct).toFixed(1));
            
        });
    
    });

});