[Иса Мирзоев]

Приветствую. Изучаю классы. Почему-то не могу создать более 1 константы для вывода данных итоговых. Ошибки в консоли нет. Мне собственно нужно, что можно было сколько угодно этих констант создать верно отображаемых.

Мой код

class RootElement{
    constructor(tagName = "div"){
        this.$el = document.querySelector(tagName)
    }
    append(){
        document.querySelector(".wrapper").insertAdjacentElement("afterbegin", this.$el)
    }
}

class Box extends RootElement{
    constructor(color,size = 150,tagName){
        super(tagName)
        this.color = color
        this.size = size
    }
    create(){
        this.$el.style.background = this.color
        this.$el.style.width = this.$el.style.height = `${this.size}px`
        this.$el.append()
        return this
    }
}

const yellowBox = new Box("yellow", 150, "div").create()
const greenBox = new Box("green", 100, "div").create()

HTML-код содержит только минимальную разметку + класс wrapper.

Одна константа на странице отображается, вторая и любые прочие - нет. Подскажите, пожалуйста, что я делаю не так? Спасибо заранее.