JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
  <ul>
    <li id="List-Option1">
      <input type="text" id="Input1" name="Input1" value="Option1"/>
    </li>
    <li id="List-Option2">
      <input type="text" id="Input2" name="Input2"/>
    </li>
  </ul>
</div>
<select id="category">
  <option>Select</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
</select>

<div id="amount"></div>

CSS

ul { border:1px solid gray; padding:10px; margin:10px; }

JavaScript

$(function(){
$("document").ready(function() {



/////////////////////////////////CALUCATIONS/////////////////////////////////


//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 0;  //time in ms, 5 second for example

//on keyup, start the countdown
$('input[name=Input2]').live('keyup',function(){
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#Input2').keydown(function(){
    clearTimeout(typingTimer);
});



//user is "finished typing," do something
function doneTyping () {


    
    
    
    var amount = parseFloat($('#Input2').val()) * 22.38;
    
    
    $('#amount').text(amount.toFixed(2)+" lbs");
    

    

    
        }    
        
        

/////////////////////////////////CALUCATIONS/////////////////////////////////










$("#List-Option1").hide();
$("#List-Option2").hide();



    



$('#category').change(function() {

var str = $('#category').val();    



if(str == 'Option1') {    
//var option1 =  $("#List-Option1").show();

var option1 =  $("#List-Option1:first").clone().show();


$('#box li:last').after(option1);    
            

}





if(str == 'Option2') {    


//var option2 =  $("#List-Option2").show();

var option2 =  $("#List-Option2:first").clone().show();

//var option33 =  $("#List-Option33").show();


$('#box li:last').after(option2);    
            

}





});
});//]]>  
    

});//]]>