JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<label class="control-label col-md-2">From</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="FromL" placeholder="0" type="text" disabled></input>
</div>
</div>
<label class="control-label col-md-1">To</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="ToL" placeholder="eg. 60,000" id="firstFieldId" type="text"></input>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Rate</label>
<div class="col-md-3">
<div class="input-group">
<input class="form-control" name="RateL" placeholder="eg. 16" type="text"><span class="input-group-addon">%</span></input>
</div>
</div>
</div>
<br><br>
<div class="form-group">
<label class="control-label col-md-2">From</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="FromM" placeholder="eg. 60,000" type="text" id="secondFieldId" disabled></input>
</div>
</div>
<label class="control-label col-md-1">To</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="ToM" placeholder="eg. 100,000" type="text" id="thirdFieldId"></input>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Rate</label>
<div class="col-md-3">
<div...
JavaScript
window.onload = function () {
var first = document.getElementById('firstFieldId'),
second = document.getElementById('secondFieldId'),
third = document.getElementById('thirdFieldId'),
fourth = document.getElementById('fourthFieldId');
first.onchange = function () {
second.value = first.value;
third.onchange = function () {
fourth.value = third.value;
};
};
};