JSFiddle - React, Tailwind, and code Playground

HTML

<form id="nameGenderForm">
<table id="teste">
     <tr>
            <th >Name</th>
            <th >Gender</th>
        </tr>
     <tr>
            <td id="11"><input type="hidden" name="11" value=""></td>
            <td  id="12"><input type="hidden" name="12" value=""></td>
        </tr>
    <tr>
            <td  id="21"><input type="hidden" name="[21].value"  value=""></td>
            <td  id="22"><input type="hidden" name="[22].value"  value=""></td>
        </tr>
</table>
    <input type="submit" />
</form>

JavaScript

$("#nameGenderForm").submit(function(event) {
    event.preventDefault();

   $("input[name=11]").value("AAAA");
    $("input[name=12]").value("BBBB");
   
    
   $('input[name="[21].value]"').value("FFFF");
   $('input[name="[22].value]"').value("ZZZZZ");
   
    rawData = $('#teste input:hidden').serializeArray();
    var formData = JSON.stringify(rawData);
    
     alert(formData);
    
});