JSFiddle - React, Tailwind, and code Playground
HTML
<div style="float:left">
<div id='dynamicInput'>Pension 1: Amount: $
<input type='text' name='adjustmentInputs[]' value='0' size='13' maxlength='20'>Start Year:
<input type='text' name='adjustmentInputs[]' value='2032' size='5' maxlength='6'>
<input type='hidden' name='adjustmentInputs[]' value='2100'>
<select name='adjustmentInputs[]'>
<option value='InflationAdjusted'>Inflation Adjusted</option>
<option value='NotInflationAdjusted'>Not Inflation Adjusted</option>
</select>by
<select name='adjustmentInputs[]' class='pensionAdjustment1'>
<option value='CPI'>CPI</option>
<option value='constantPercentage'>Constant %</option>
</select>
<div id='constantPercentageText1' style='display: none'>@
<input type='text' name='adjustmentInputs[]' value='3' size='5' maxlength='6'>%</div>
</div>
<input type="button" value="Add another Portfolio Adjustment" onClick="addInput('dynamicInput');">
</div>
<script>
$("[class*=pensionAdjustment]").change(function() {
var n = $(this).attr('class').replace('pensionAdjustment', '');
var newId = "constantPercentageText" + n;
var selectedItem = $(this).children('option:selected');
if ($(this).val() == 'constantPercentage') {
$("#constantPercentageText" + n).css('display', 'inline');
$("#constantPercentageText" + n).show();
} else {
$("#constantPercentageText" + n).css('display', 'none');
}
});
var counter = 1;
var limit = 40;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Pension " + (counter + 1) + ": Amount: $<input type='text' name='adjustmentInputs[]' value='0' size='13' maxlength='20'> Start Year:...