JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    
    <body>
        <div id="console">
            <h2>Console</h2>
        </div>
        <div id="header" class="foo">
        </div>
        <div id="content" class="">
        </div>
        <div id="footer">
        </div>
    </body>
</html

CSS

div {
    border: 1px solid black;
}

#console {
    background: #DDF;
}

#console h2 {
    font-size: 1.5em;
}

JavaScript

$(function() {
    log("List of div ids: ");
    $.each($("div"),function(index,value) {
        log($(value).prop("id") + " ");
    });
    log(" ");
    log("List of foo classed divs: ");
    
    $.each($("div.foo"),function(index,value) {
        var x = $(value).prop("id");
        if (x == 'header') {
        log(x);
        }
    });
     
     if (x == header) {
        log('test');
        }
});

function log(msg) {
    $("#console").append("<pre>" + msg + "</pre");
}