JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="devCalc">

<select id="term" name="term" onchange="copyTerm(selectedIndex);">
<option value="" selected>Please Select</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
</select>
   
<br>   
   


<div id="releases"></div>

<select id="release" name="release" onchange="addRelease(selectedIndex);">
<option value="" selected>Add Release</option>
</select>


<div id="reductions"></div>

<select id="reduce" name="reduce" onchange="addReduction(selectedIndex);">
<option value="" selected>Add Repayment</option>
</select>






</div>

CSS

#devCalc {font-family:Arial;font-size:16px;}
#devCalc input,option,select,button {font-family:Arial;font-size:16px;}
#releases div {margin-bottom:4px;}
.close div {width:30px; height:30px;background-color:green;display:inline-block;;}

JavaScript

// // FUNCTION - copy number of Months to number of Releases

function copyTerm(selectedIndex) {
var release = document.getElementById('release');
release.options.length = 0;

var releases = document.getElementById('releases');
releases.innerHTML = "";

var reduce = document.getElementById('reduce');
reduce.options.length = 0;

var reductions = document.getElementById('reductions');
reductions.innerHTML = "";


var min = 2,
    max = selectedIndex;
    
var opt = document.createElement('option'); 
    opt.value = "";
    opt.innerHTML = "Add Release";
    release.appendChild(opt);
    
var opt2 = document.createElement('option'); 
    opt2.value = "";
    opt2.innerHTML = "Add Repayment";
    reduce.appendChild(opt2);

var newRel = document.createElement('div'); 
var newRep = document.createElement('div');
    releases.appendChild(newRel);
    reductions.appendChild(newRep);

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    release.appendChild(opt);
    var opt2 = document.createElement('option');
    opt2.value = i;
    opt2.innerHTML = i;
    reduce.appendChild(opt2);

// create empty divs
var releases = document.getElementById('releases');
var newRel = document.createElement('div');
releases.appendChild(newRel);
var reductions = document.getElementById('reductions');
var newRep = document.createElement('div');
reductions.appendChild(newRep);
}

}

// // FUNCTION - add a Release

function addRelease(selectedIndex) {

if (selectedIndex == 0) {return false;}

var releases = document.getElementById('releases');

// create input
var input = document.createElement('input');
input.id = "release_" + (selectedIndex+1);
input.type = "tel";
input.onkeyup = "";

// create delete button
var del = document.createElement('div');
del.onclick = function(){delRelease(selectedIndex)};

// create Month Number
var mnth = "Month " + (selectedIndex+1) + ": ";

// create div to contain input elements
var...