JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testElement">
    Test1
    <div id="testElement2">Test2</div>
</div>

CSS

#testElement {
    background: #888;
    width: 200px;
    height: 200px;
}

JavaScript

var thog = thog || {};

thog.Test = {
    
    init: function() {
        this.retrieveElements();
        this.testFunction();
    },
    
    retrieveElements: function() {
        this.elements = {
            $testElement: $('#testElement'),
            $testElement2: $('#testElement2'),
            testElement2: document.getElementById('testElement2'),
        };
    },
    
    testFunction: function() {
        var self = this;
        
        this.elements.$testElement.on('click', function() {
            // - this == vanilla js DOM objekt
            this.style.backgroundColor="red";
            
            // Hvorfor gir denne "undefined"?
            // - $testElement2 == zepto object
            // for å hente ut vanilla js DOM object fra fra zepto her,
            // må du bruke get(0) 
            self.elements.$testElement2.get(0).style.backgroundColor="green";
            
            // .. eventuellt kan du drite i å bruke her zepto for å fikle med #testElement2
            self.elements.testElement2.style.backgroundColor="blue";
        });
    }
    
};

$(function(){
    thog.Test.init();
});