JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/meetselva/attrchange/master/attrchange.js"></script>
<div id="one" class="elem" data-result="inr"><input type='text' size='10' id='echoText' name='echoText' class='d'></input></div>
<div id="debug"></div>

CSS

.elem{
     background-color:red;
     clear:both;
     border-radius:20%;
     height:100px;
     width:100px;
     padding:10px;

 }
 .d {
     padding:5px;
     width:20px;
     margin:30px;
     border-radius:20%;
     }

JavaScript

$(document).ready(function(){
    $('body').on("change",'.d',function(){
	    $(this).parent().data("result",$(this).val());
	    console.log($("#one").data("result"));
        $("#debug").html("data changed"+$("#one").data("result"));
    });
    $('body').attrchange({
	    trackValues: true,
	    callback: function(e){
	         $("#debug").html("success"+e.attributeName);
	    }
    });
    $(document).on('attrchange',function (e) {
        $("#debug").html("success"+e.attributeName);
    });
});