JSFiddle - React, Tailwind, and code Playground

by Banzay

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div>
    <div class="row notices" id="admin1">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
    <div class="row notices" id="admin2">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
<!-- DebugDataTemplateBegin {"template":"three"} -->
    <div class="row notices" id="admin3">comment Three content</div>
<!-- DebugDataTemplateEnd {"template":"three"} -->
</div>
        
        
<a href="#one"> one </a> 
<br/>
<a href="#two"> two </a>
<br/>
<a href="#two">three</a>

CSS

.highlight {
    color: red;
}

JavaScript

var getComment = function (templateName) {
    if(templateName=="one"){
        return $("body").contents().filter(function(){return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));  }); 
    }else{
    return $("body").children().contents().filter(function () {
        return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
    });}
}
                                           
$('a').hover(function () {
    // var templateName = this.href.split('#')[1];
    var templateName = $(this).text().trim();
    var comment = getComment(templateName);
    if(templateName=="one"){
        var element = $(comment).next().children().first();
        console.log(element);
    }else{
        var element = $(comment).next();
    }
    
    element.toggleClass('highlight');
})