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() {
        //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() {
            var $this = $(this);
            typingTimer = setTimeout( function() {
                var amount = parseFloat($this.val()) * 22.38;
                var id = $this.parent().attr('id').match(/\d+$/)[0];
                $('#amount-'+id).text(amount.toFixed(2) + " lbs");
              }, 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");
        }

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

        var i = 0;
        $('#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);
                //option1.insertAfter('#box li:last');
            }

            if (str == 'Option2') {
                //var option2 =  $("#List-Option2").show();
                var option2 = $("#List-Option2:first").clone().show();
                option2.attr('id', 'option2-' + i);
                
                var amount = $('#amount').clone().attr('id', 'amount-'+i);
                
                //var option33 =  $("#List-Option33").show();
                $('#box li:last').after(option2);
                $('body').append(amount);
                i++;
            }
        });
    }); //]]> ...