JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/meetselva/attrchange/raw/master/attrchange.js"></script>
<div class="demo-content"> 
    <div title="click anywhere inside to adjust the attributes" class="demo" id="demo1" >demo 1 div</div>
    <div title="click anywhere inside to adjust the attributes" class="demo" id="demo1">demo 2 div</div>
    <div title="click anywhere inside to adjust the attributes" class="demo" id="demo1">demo 3 div</div>   
</div>
<div id="attributeChanger">
    <h4 class="title">Attribute Changer</h4>
    <div class="attrList"></div>
    <div class="addAttribute text-right"><a href="javascript:void(0)" title="add new attribute">add new attribute</a></div>
</div>

<div id="logger">
    <a href="javascript:void(0)" id="clearLog" class="float-right" style="margin-right: 10px; position: absolute; right:0px; top:0px; background-color: #3E6B9D; color: white; ">clear</a>
</div>
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
    <h4 class="title">Add/Modify Attribute</h4>
    <p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>    
    <p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
    <div class="clear">&nbsp;</div>
    <button type="button" class="float-right close">Close</button>
    <button type="button" class="float-right update">Update</button>
    <div class="clear"></div>
</div>

<div id="overlay"></div>

CSS

body { font-family: "Helvetica","Lucida Sans","Lucida Sans Unicode","Luxi Sans",Tahoma,sans-serif; }

div.demo-content { z-index: 1; border: 1px solid #FF9B08; background-color: #F9EDB1; width: 300px;  }

div.demo-content div { border: 1px dotted #C95400; width: 100px; height: 20px; margin: 10px; padding: 5px; font-size: 0.9em; background-color: #FEFFE5; color: #574353; z-index: 1009; }

div.demo-content div:hover { border-style: solid; }

div.demo-content div.selected { border-style: solid; background-color: #C95400; color: white; }

#attributeChanger { border: 1px solid #C95400; min-height: 50px; margin: 10px; padding: 2px; font-size: 0.8em; background-color: #FEFFE5; color: #574353; opacity: 0; position: absolute; top: -200px; z-index: -1; filter: alpha(opacity=0); z-index:0; min-width: 150px;  }

h4.title { font-weight: bold; background-color: #C95400; color: white; padding: 1px 3px;  }

.attrList p { width: 95%; margin-top: 3px; }
.attrList p a, .attrList p span { font-size: 0.7em; vertical-align: bottom; margin-top: 2px; }

.addAttribute  { font-size: 0.7em; margin-top: 10px; }

#logger { position: fixed; height: 200px; width: 95%; overflow: auto; border: #3E6B9D; background-color: #4169E1; color: white; bottom: 0px; left: 0px; font-size: 0.8em; padding-left: 2px; overflow-y: scroll; }

#logger p.even { background-color: #6179F1; }

.text-right { text-align: right; }
.float-right { float: right; }
.clear { clear: both; }
.strong { font-weight: bold; }

#addOrmodifyAttr { font-size: 0.8em; width: 250px; border: 1px solid #FF9B08; background-color: #F9EDB1; padding: 5px 2px; position: absolute; display: none; z-index: 1011; top: 20%; left: 30%; }
#addOrmodifyAttr p { margin-top: 5px; padding: 0px 5px; }
#addOrmodifyAttr button { font-size: 0.8em; }
#addOrmodifyAttr input { text-align: right; font-size: 0.9em; }

.nbnbg { border-width: 0px; background-color: transparent; }

#overlay {
  display: none;
  background-color: #000;
  opacity: 0.7;
  filter:...

JavaScript

$(function() {

    var attrTmpl = '<p title="{attrName}">{attrName}<a href="javascript:void(0)" class="remove float-right" title="remove">remove</a><span class="float-right">&nbsp;|&nbsp;</span><a href="javascript:void(0)" class="modify float-right" title="modify">modify</a></p>';

    var $attributeChanger = $('#attributeChanger');
    var $attrchange = $('div', '.demo-content');

    var $logger = $('#logger'),
        logStyler = 0;
    $attrchange.attrchange(function(attrName) {

        var rowStyle = (logStyler) ? 'odd' : 'even';
        $logger.prepend('<p class="' + rowStyle + '">- ' + '<b>attrchange</b>' + ' handler triggered: <b>' + attrName + '</b> changed for ' + $(this).html() + '</p>');
        logStyler = logStyler ? 0 : 1;
    });

    $attrchange.click(function() {

        var attrList = [];
        for (var i = 0, attrs = this.attributes, l = attrs.length; i < l; i++) {
            attrList.push(attrTmpl.replace(/{attrName}/g, attrs.item(i).nodeName));
        }

        $('.attrList', $attributeChanger).html(attrList.join(''));

        $attributeChanger.data('demo-div-idx', $(this).index());

        var this_pos = $(this).position();
        $('#attributeChanger').css('left', this_pos.left + $(this).outerWidth(true)).show().stop(true, true).animate({
            top: this_pos.top + 5,
            opacity: 0.2
        }, 200, function() {
            $(this).animate({
                opacity: 1
            }, 500);
        });

        //$(this).addClass('selected');
    });

    $(document).click(function(e) {
        if (!$(e.target).parent().hasClass('demo-content')
            && !$(e.target).closest('#attributeChanger').length
            && !$('#overlay').is(':visible')) {
            $attributeChanger.stop(true, true).animate({
                top: -100,
                opacity: 0
            }, 500);
        }
    });

    var dialogTitleTmpl = '<div class="ui-corner-all roster_dialog_title ui-widget-header ui-corner-all...