JSFiddle - React, Tailwind, and code Playground

by Shaunak Deshpande

HTML

<ul class="list-group" id="NewsRoomNavList">
<li id="NavRepeater_NavItemLI_0" class="list-group-item" data-group="Test Group">

    <span id="TestGroup" data-toggle="collapse" data-target="#TestGroupContainer" class="GroupName">
        <img src="/assets/img/icons/application_cascade.png" class="NewsRoomNavIcon">Test Group</span>
        <div id="TestGroupContainer" class="TestGroup collapse NewsRoomGroup">
        <p>
            <img id="NavRepeater_UserProfilePic_0" class="NewsRoomNavIcon" src="/ugc/heyadamhey/sml/heyadamhey.jpg">
            <a id="NavRepeater_NewsRoomLink_0" class="APEignored NewsRoomNavLink" data-id="asdasd" data-nr-id="25045">
                <span class="count badge pull-right asdasd"> </span>asdasd
            </a>
        </p>
        <p>
            <img id="NavRepeater_UserProfilePic_1" class="NewsRoomNavIcon" src="/ugc/heyadamhey/sml/heyadamhey.jpg">
            <a id="NavRepeater_NewsRoomLink_1" class="APEignored NewsRoomNavLink" data-id="test" data-nr-id="11163">
                <span class="count badge pull-right test"> </span>test
            </a>
        </p>
    </div>
</li>
</ul>

JavaScript

SetUnreadArticleCounts();
function SetUnreadArticleCounts()
{
    //if(window.location.href.match(/News/) === null)
    //{
    //get article counts from local storage
    var groupsCount = {};
    $("#NewsRoomNavList>li").each(function (i, element) {
        
        if ($(element).children().first().attr('class') !== "GroupName")
        {
            console.log('if'+$(element).find(".count").attr("class"));
            var newsRoomId = $(element).find(".count").attr("class");
            try{
                newsRoomId = newsRoomId.replace("count badge pull-right ", "");
                console.log($("." + newsRoomId));
                $("." + newsRoomId).html(GetUnreadArticleCountsPerNewsRoom(newsRoomId));

            }
            catch(err)
            {
                alert(err);
            }
        }
        else
        {
            try
            {
                console.log('else'+$(element).find(".count").attr("class"));
                var GroupName = $(element).find(".count").attr("class").replace("count badge pull-right ", "");

                $(element).find("p").each(function (j, NR) {
                    console.log(NR);
                    var newsRoomId = $(NR).find(".count").attr("class");
                    newsRoomId = newsRoomId.replace("count badge pull-right ", "");

                    //calculate news room totals for news group


                })  //end $.each
                $(element).prepend($("<span class='count badge pull-right " + newsRoomId + "'>"+groupsCount[GroupName]+"</span>"))

            }
            catch(err)
            {
alert(err);
            }

        }
    })  //end $.each

}

function GetUnreadArticleCountsPerNewsRoom(newsRoomId){
    
}