JSFiddle - React, Tailwind, and code Playground

HTML

<div>
Normally, the hidden input field has attribute `type="hidden"`, but set it as `type="text"` so you can see what happens.
</div>

<input type="text" class="th" id="typeHidden_1" />
<input type="text" class="th" id="typeHidden_2" />
<input type="text" class="th" id="typeHidden_3" />
<input type="text" class="th" id="typeHidden_4" />
<input type="button" id="mybutt" value="Show Me" />
<input type="button" id="nutherbutt" value="Read Hidden Field" />

CSS

div{margin:0 0 20px 0;}
.th{margin-top:10px;width:100%;height:30px;background:wheat;padding:2px;}

JavaScript

var myGlobalCounter = 0;

$('#mybutt').click(function(){
    myGlobalCounter++;
   $( '#typeHidden_' +myGlobalCounter ).val('Secret text ' + myGlobalCounter);
});

$('#nutherbutt').click(function(){
    for (n=1; n<= myGlobalCounter; n++){
        var tmp = $('#typeHidden_' +n).val();
        alert( tmp );
    }
});