Many rectangles with text on each one

[Gammerr]

Hey, I'm building this game that rectangles are falling from the top of the screen and there is a character at the bottom that needs to catch it.

Now I need to add something like 20 rectangles with different text on each one, so I didn't want to create 20 sprites, I wanted to create 1 sprite for the rectangle and use the same sprite for the 20 objects.

How would you do that?

 

[Gammerr]

I think I'm missing something with the for loop that I created and groups

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('bubble1', 'assets/rectangle.png', 220, 103);    
    game.load.image('pocket', 'assets/pocket.png');

}

var bubble1;
var pocket;
var cursors;
var score = 0;
var scoreText;

var text1;

function create() {

    var randomNumber = Math.floor(Math.random() * 550) + 1;

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.add.image(0, 0, 'sky');

    game.stage.backgroundColor = '#63b3cf';

    for ( i=0; i < 3; i++ ) {
        bubble1 = game.add.sprite(randomNumber, 0, 'bubble1');
    }
    
    game.physics.enable(bubble1, Phaser.Physics.ARCADE);

    bubble1.body.velocity.y = 60;

    //  This adjusts the collision body size.
    //  220x10 is the new width/height.
    //  See the offset bounding box for another example.
    bubble1.body.setSize(220, 103, 0, 0);

    pocket = game.add.sprite(568, 568, 'pocket');    

    game.physics.enable(pocket, Phaser.Physics.ARCADE);

    pocket.body.immovable = true;
    pocket.body.collideWorldBounds = true;

    cursors = game.input.keyboard.createCursorKeys();

     //  The score
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#fff' });

    var bubbleTextStyle = { font: "16px Arial", fill: "#fff",  align: "center" };   

    text1 = game.add.text(0, 0, "Bubble1", bubbleTextStyle);
    text1.anchor.set(0.5);

}

function update() {

    game.physics.arcade.overlap(bubble1, pocket, collisionHandler, null, this);

    pocket.body.velocity.x = 0;

    // Movement
    if (cursors.left.isDown) {
        //  Move to the left
        pocket.body.velocity.x = -150;
    } else if (cursors.right.isDown) {
        //  Move to the right
        pocket.body.velocity.x = +150;
    } else {
        pocket.animations.stop();
    }


    // Text
    text1.x = Math.floor(bubble1.x + bubble1.width / 2);
    text1.y = Math.floor(bubble1.y + bubble1.height / 2);

}

function collisionHandler (bubble1, pocket) {

    bubble1.destroy();
    
    score += 10;
    scoreText.text = 'Score: ' + score;

}