JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
<p id="txt0"></p>
<p id="txt1"></p>
<p id="txt2"></p>
<p id="txt3"></p>
<p id="txt4"></p>
<p id="txt5"></p>
</body>

JavaScript

function Rect(x, y, s, c) {
    this.x = x,
    this.y = y,
    this.s = s
    this.c = c;
}

function start() {
    let rects = [];
    let c = [0,0,0];
    let x = 0;

    for (i = 0; i < 10; i++) {
        rects.push(new Rect(x, 50, 100, c));

        x += 110;
    }

    document.getElementById("txt0").innerHTML = "Values before value change";
    document.getElementById("txt1").innerHTML = rects[0].c;
    document.getElementById("txt2").innerHTML = rects[1].c;

    // I change value in one of the array-elements
    rects[0].c[0] = 1;

    document.getElementById("txt3").innerHTML = "Values after value change";
    
    // Why is the value changed for all my array-elements?
    document.getElementById("txt4").innerHTML = rects[0].c;
    document.getElementById("txt5").innerHTML = rects[1].c;
    
}

window.onload = start;