JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<div>
<p>dtest</p>
<p>dtest</p>
<p>dtest</p>
    <div class="me" id="ego">me<div class="and me">me<div class="too">me<div id="iHaveAnID"> I have an ID</div></div></div><p>dtest</p>
<p>dtest</p>
<p>dtest</p></div>
</div>
<textarea id="current" rows="10" cols="40"></textarea><br />
<textarea id="last" rows="10" cols="40"></textarea><br />
<label for="fullSelector">Full selector</label><br />
<input type="text" id="fullSelector" /><input type="button" id="test" value="test" /><br />

CSS

.gotcha {outline: dotted 1px red; background-color: rgba(255,255,0,.3);}
.notPerfect {background-color: rgba(255,0,0,.3);}
#fullSelector {width: 80%;}
textarea {width: 80%; height: 2em;}

JavaScript

var settings = {
    includeTagIfID: false
};
var sTagName, sId, bHasID, sClass, sSelector, currentTarget, $fullSelector, $test;
var attr = 'eventid';
var current = jQuery('#current').attr(attr, -1);
var last = jQuery('#last').attr(attr, -1);
$fullSelector = jQuery('#fullSelector');
$test = jQuery('#test').click(function() {
    jQuery('.gotcha,.notperfect').removeClass('gotcha,notperfect');
    jQuery($fullSelector.val()).addClass('gotcha');
});
jQuery('#fullSelector,#test').click(function(e) {
    e.preventDefault();
    return false;
});
    jQuery('*').not('#fullSelector,#test').on('click', function(e) {
    var $this = jQuery(this);
    if (current.attr(attr)!=e.timeStamp) {
       current.attr(attr, e.timeStamp);
       last.attr(attr, e.timeStamp)
       last.val(current.val());
       current.val('');
        setTimeout(function() {
           jQuery('.gotcha,.notPerfect').removeClass('gotcha','notPerfect');
           sSelector = jQuery.trim(current.val());
            findUnique(e.currentTarget);
            jQuery(sSelector).addClass('gotcha');
            $fullSelector.val(sSelector);
            // Now try to minimize selector
            var bits = sSelector.split(' ');
        }, 10);
    }
    sTagName= $this[0].nodeName;
    sId = $this[0].id;
    sId = (sId!='') ? '#'+sId : '';
    bHasID = (sId!=='');
    sClass = $this[0].className.replace(/gotcha/g, '');
    sClass = (sClass!='') ? '.'+sClass.split(' ').join('.') : '';
    sClass = sClass.replace(/\.$/g, '');
    sTagName = (!!bHasID) ? ((settings.includeTagIfID) ? sTagName : '') : sTagName;
    current.val(sTagName+sId+sClass+' '+current.val()); 
    if (bHasID) return false;    
});
function findUnique(oCurrentTarget, level) {
    var hits = jQuery(sSelector);
    console.log(sSelector+' => '+hits.length);
    var parts = sSelector.split(' ');
    level = (level||parts.length-1);
    if (hits.length>1) {
        var bFound=false;
        for(var i=0; !bFound && i<hits.length; i++) {
       ...