JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function() {

            var string = "";
        
            for(var i = 1; i <= 10; i++){

                $('#div1').find("*[class*=w_line_" + i + "]").each(function(){

                //console.log("CN: " + get_xpath($(this)));
        
                string = string + "\n" + get_xpath($(this));
                    
                });

            }
        
            $('#console').text(string);

            function get_xpath(element){

                var path = $(element).parents().andSelf();
                var xpath='/';
                for (var i = 0; i < path.length; i++)
                {
                    var nd = path[i].nodeName.toLowerCase();
                    xpath += '/';
                    if (nd != 'html' && nd != 'body')
                    {
                        xpath += nd+'['+ ($(path[i-1]).children().index(path[i])+1) +']';
                    }
                    else
                    {
                        xpath += nd;
                    }
                }
                return xpath;

            }

        });
    </script>    
</head>
<body>
    <div id="console"></div>
<div id="div1" class="" style="width: 300px; font-size: 40px; height: 200px;">
<b class="w_line_1">
<span class="w_line_1">Why</span>
<span class="w_line_1">is</span>
<span class="w_line_1" style="background-color: blue;">
<span class="w_line_1">some</span>
<span class="w_line_2">bold</span>
<span class="w_line_2">and</span>
<span class="w_line_2">other</span>
<span class="w_line_3">not</span>
<span class="w_line_3">so</span>
<span class="w_line_3">bold</span>
<span...