JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="active">
    <a href="#thisone" data-updated="23">adssdf</a>
    <a href="#thistwo">adssdf</a>
</div>

k<div id="thisone">
    <a href="#thisthree" data-updated="23">adssdf</a>
    <a href="#thisfour" data-updated="23">adssdf</a>
    <div id="thisthree"></div>
    <div id="thisfour"></div>
    
    <div data-new="true">This content was updated</div>
</div>
<div id="thistwo">
  
    <a href="#thisfive" data-updated="23">adssdf</a>
    <div id="thisfive">asdfadssadf<span data-new="true">asdfasdf</span></div>
    
</div>

CSS

.thiscontentUpdated { border: 1px dashed red; }

JavaScript

$('.active a').each(function() {

    var obj = $(this),d
        objHref = obj.attr('href'),
        amount = ( $( objHref ).find('> a[data-updated]').length ||  0 )  + ( obj.data('updated') ? 1 : 0 );
    
    // Find content that matches the list of links in active page
    // and find links with updated content in those links.
    $('<span> '+ amount +'</span>').appendTo( obj );
    
    // Locate updated content and light it up
    $( objHref + ' [data-new]' ).addClass('thiscontentUpdated');
    
});