JSFiddle - React, Tailwind, and code Playground

HTML

<label>enter a string:
    <input id="ninput" pattern="\d+(\.\d{2})?" type="text" step="any" />
</label>
<div>value with jQuery: <span id="value-jq"></span>
</div>
<div>value with pure javascript: <span id="value-pure"></span>
</div>
<button onclick="document.getElementById('ninput').value='';">empty</button>
<section class="events"></section>

CSS

.events{color:red}

JavaScript

//jquery
$('#ninput').on('change', function () {
    $('.events').append('<div>change event fired (jq)</div>');
    var value = $(this).val();
    $('#value-jq').text(value);
});

//pure js
var input = document.getElementById('ninput');
input.addEventListener('change', function (evt) {
    var value = evt.target.value;
    document.getElementById('value-pure').innerHTML = value;
    document.getElementsByClassName('events')[0].innerHTML += '<div>change event fired (pure js)</div>';
}, false);