JSFiddle - React, Tailwind, and code Playground

HTML

<div id='data'></div>

JavaScript

(function(the_namespace){
    the_namespace.Test = function(){
        
        this.array= [];
        this.init.apply(this, arguments);
    };
    
    the_namespace.Test.prototype = {
        
        init: function(args){
            
            //this.array = []; // Comment this out and it'll work
            
            // I know that if I do this, "this.array = []" it'll work..
            // but why does the array retains the previous values when I create a new object in the for loop.. I was expecting for it to create a new clean object..
            
            this.array.push("Hola");
            this.array.push("Adios");
            $("#data").append("Array: <br /><br />");
            $.each(this.array, function(i, v){
                $("#data").append("Index: " + i + " Value: " + v + "<br />");
            });
            
            $("#data").append("--- END --- <br /><br />");
            return this;
        }
    };
})( window.the_namespace = window.the_namespace || {});


for(var i = 0; i < 2; i++){
    var data = new the_namespace.Test();
}