JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <p class="child">child</p>
</div>
<div class="parent">
  <p class="child">child</p>
</div>

JavaScript

"use strict";

(function(window) {

    var i, $, $Obj, ele; // global variable
    
    $ = function(el, length) {
        return new $Obj(el, length); // create new object
    };

    $Obj = function(el, length) {
   		
      ele = document.querySelectorAll(el); // get selector element 
      
      	this.length = ele.length; // count the length of ele
        
        for (i = 0; i < this.length; i++) {
        	this[i] = ele[i]; // loop it
        }
       
    };
    
    $Obj.prototype = { // object prototype
    
       each : function(fn) { // create method each just like jquery
       
       var arr = []; // create array to store value
			
       for (i = 0; i < this.length; i++) {      	
         arr.push(this[i]); // push it to arr variable
	     }
      
       fn.apply(this, arr); // IS THIS THE CORRECT WAY TO APPLY IT? 
       return this; // return this, so, it's chainable for other method
        
      }
     
   	};
 
window.$ = $; // make dollar sign global object

})(window);
    
$(".child").each(function() {

	console.log(this);
	this.style.color = "red"; // not working, what's wrong with my code? is it because my "apply" wrong?

});