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>

<div id="dg_1" class="divGroup">
    <input type="text" class="typeHidden" />
    <input type="button" class="mybutt" value="Show Me" />
</div>

<div id="dg_2" class="divGroup">
    <input type="text" class="typeHidden" />
    <input type="button" class="mybutt" value="Show Me" />
</div>

<div id="dg_3" class="divGroup">
    <input type="text" class="typeHidden" />
    <input type="button" class="mybutt" value="Show Me" />
</div>
<div id="tst">If visible, js is broken</div>
<input type="button" id="nutherbutt" value="Read Hidden Field" />

CSS

div{margin:0 0 20px 0;}
.typeHidden{background:wheat;padding:2px;}
#tst{position:absolute;left:80%;width:100px;height:60px;background:yellow;}

JavaScript

$('.mybutt').click(function(){
    var num = $(this).closest('div').attr('id').split('_')[1];
    $(this).closest('div').find('input.typeHidden').val('Secret text ' +num);
});

$('#nutherbutt').click(function(){
    $('.divGroup').each(function(){
        var tmp = $(this).find('input.typeHidden').val();
        alert( tmp );
    });
});