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="amount1"></div>
<div id="amount2"></div>

CSS

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

JavaScript

$("document").ready(function() {
    /////////////////////////////////CALUCATIONS/////////////////////////////////
    //setup before functions
    var typingTimer; //timer identifier
    var doneTypingInterval = 0; //time in ms, 5 second for example
    $('input[name=Input2], input[name=Input1]').live('keyup', function() {
        var str = $(this).prop("id");
        var pattern = /[0-9]+/g;
        var matches = str.match(pattern);

        amount = parseFloat($(this).val()) * 22.38;
        typingTimer = setTimeout(doneTyping(matches), doneTypingInterval);
    });

    $('#Input2').keydown(function() {
        clearTimeout(typingTimer);
    });

    function doneTyping(matches) {
        $('#amount'+matches).text(amount.toFixed(2) + " lbs");
    }
    $("#List-Option1,#List-Option2").hide();

    $('#category').change(function() {
        var str = $('#category').val();
        if (str == 'Option1') {
            var option1 = $("#List-Option1:first").clone().show();
            $('#box li:last').after(option1);
        }

        if (str == 'Option2') {
            var option2 = $("#List-Option2:first").clone().show();
            $('#box li:last').after(option2);

        }

    });
});