JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/qunit/1.13.0/qunit.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css">
<h1 id="qunit-header">Unit Tests</h1>


<h2 id="qunit-banner"></h2>

<div id="qunit-testrunner-toolbar"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
    <div id="empty-class" class="  ">
        <div id=" " class="1"></div>
        <div id="bad html" class="2"></div>
        <div id="3" class="  white   space    is                       hard      "></div>
    </div>
    <ul id="numbers">
        <li>One</li>
        <li>Two</li>
        <li>Four</li>
        <!-- Its an unordered list afterall -->
        <li>Three</li>
    </ul>
</div>

JavaScript

!(function ($, undefined) {
    /// adapted http://jsfiddle.net/drzaus/Hgjfh/5/

    var get_selector = function (element) {
        var pieces = [];
        for (; element && element.tagName !== undefined; element = element.parentNode) {
            if (element.className) {
                var classes = element.className.split(' ');
                for (var i in classes) {
                    if (classes.hasOwnProperty(i) && classes[i]) {
                        pieces.unshift(classes[i]);
                        pieces.unshift('.');
                    }
                }
            }
            if (element.id && !/\s/.test(element.id)) {
                pieces.unshift(element.id);
                pieces.unshift('#');
            }
            pieces.unshift(element.tagName);
            pieces.unshift(' > ');
        }

        return pieces.slice(1).join('');
    };

    $.fn.getSelector = function (only_one) {

        if (true === only_one) {
            return get_selector(this[0]);
        } else {
            return $.map(this, function (el) {
                return get_selector(el);
            });
        }
    };

})(window.jQuery);

test('Should return the selector for an element', function () {
    var expected = 'HTML > BODY > DIV#qunit-fixture',
        result = $('#qunit-fixture').getSelector();
    equal(result, expected);
});

test('Should return an empty string when there is no matching element', function () {
    var expected = '',
        result = $('#this-aint-no-id').getSelector();
    equal(result, expected);
});

test('Should work properly when document.className is set', function () {
    document.className = 'Why would anyone do this';
    var expected = 'HTML > BODY > DIV#qunit-fixture',
        result = $('#qunit-fixture').getSelector();
    delete document.className;
    equal(result, expected);
});

test('Should work properly when document.id is set', function () {
    document.id = 'silly-developer-documents-arent-for-ids';
   ...