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());
        $(this).parent().attr("data-result",$(this).val());
//	    console.log($("#one").data("result"));
        var element = $("#one");           
        $(element[0].attributes).each(function() {
            $("#debug").prepend("<p>data changed  "+this.nodeName+":"+this.nodeValue+"</p>");
        });

    });
    $('#one').attrchange({
	    callback: function(e){
	         $("#debug").prepend("<p>success detected attr change  "+e.attributeName+"</p>");
	    }
    });
 //   $(document).on('attrchange',function (e) {
 //       $("#debug").prepend("<p>success"+e+"</p>");
 //   });
});