JSFiddle - React, Tailwind, and code Playground

HTML

<form id="FooBar">
    <div>
        <input type="text" name="datat[0]['maara']" value="1" />
        <input type="text" name="datat[0]['yksikko']" value="kpl" />
    </div>
    <div>
        <input type="text" name="datat[1]['maara']" value="2" />
        <input type="text" name="datat[1]['yksikko']" value="litra" />
    </div>
    <div>
        <input type="text" name="datat[2]['maara']" value="5" />
        <input type="text" name="datat[2]['yksikko']" value="kpl" />
    </div>
    <div>
        <input type="text" name="datat[3]['maara']" data-yksikko="litra" value="4" />
        <input type="text" name="datat[3]['yksikko']" value="litra" />
    </div>
</form>

JavaScript

var maarat = {};
$.each($('#FooBar').serializeArray(), function(i, field) {
    if (i == 0)
    {
        console.log('tama on maara[0] = '+ field.value);
        alert('tama on maara[0] = '+ field.value);
      }
});