JSFiddle - React, Tailwind, and code Playground
HTML
<div class="forses1">
<div class="fors">
<input type="text" class="inha1" value="inha1">
<input type="text" class="inha2" value="inha2">
<input type="text" class="inha3" value="inha3">
<input type="text" class="inhb1" value="inhb1">
<input type="text" class="inhb2" value="inhb2">
<input type="text" class="inhb3" value="inhb3">
</div>
</div>
<div class="copy">
<input type="text" id="aa1" readonly>
<input type="text" id="aa2" readonly>
<input type="text" id="aa3" readonly>
<input type="text" id="ab1" readonly>
<input type="text" id="ab2" readonly>
<input type="text" id="ab3" readonly>
</div>
<button>Let's copy!</button>
CSS
input {
display: block;
margin: 5px;
}
.fors {
padding: 5px 0;
background: #ccc;
}
.copy {
padding: 5px 0;
background: #ff0;
}
JavaScript
var dependence = {
inha: 'aa',
inhb: 'ab'
},
allInput = $(':text'),
inpFrom = allInput.filter(function(i, el) {
return $(el).closest('[class^=forses]').length;
});
$('button').on('click', function() {
$.each(inpFrom, function(i, el) {
var cls = el.className.match(/([a-z]+)([\d]+)/);
if (dependence.hasOwnProperty(cls[1])) {
allInput.filter('#' + dependence[cls[1]] + cls[2]).val(el.value);
}
});
});