How i can create block with many buttons.

Phaser 3
1

Hello. My name is Peter. How can I create a container with buttons, with the same padding between them? Buttons have text and a sprite that I create in a container. I’m new and maybe I’m missing something.

This is the button code:

export default class ButtonContainer extends Phaser.GameObjects.Container {
    bet
    amount
    amountText
    constructor(scene, x, y, texture, onClick, text) {
        super(scene, x, y);
        const button = new Button(scene, texture, onClick);
        this.add(button);
        this.amount = '';
        var style = { font: "32px Arial" };
        const buttonText = this.scene.add.text(0, 0, text, style).setOrigin(0);
        buttonText.x = button.width / 2 - buttonText.width / 2;
        buttonText.y = button.height / 2 - buttonText.height / 2;
        this.bet = this.scene.add.container(button.width / 2, button.height / 2);
        const betImage = this.scene.add.sprite(0, 0, 'bet');
        this.amountText = this.scene.add.text(0, 0, this.amount, {color: 'black', fontFamily: 'Calibri'}).setOrigin(.5)
        this.bet.add(betImage);
        this.bet.add(this.amountText);
        this.add(buttonText);
        this.add(this.bet);
        this.bet.alpha = 0
        this.setScale(1.05)
        return this;
    }
    setBetAmount(text: String) {
        this.amountText.text = this.amount;
        this.bet.alpha = 1;
    }
    clearBetAmount() {
        this.amountText.text = '';
        this.bet.alpha = 0;
    }

}

This is the current container:

export default class Row extends Phaser.GameObjects.Container {
    constructor(scene, x, y, elements, texture) {
        super(scene, x, y);
        elements.forEach((element, idx) => {
            this.add(new ButtonContainer(scene, 0 + idx * 165, 0, texture, ()=>console.log(element), element))
        })
        scene.add.existing(this);
    }
}

My code works, but when I want to replace the texture of another set of buttons, I get the wrong padding.

Thanks.