Many customerComponent instance in one page

Hello,

I have created a customer component, but in the same html page, i can just see the first which is updated by the server, the second is not changed.
How can i set more than one component correctly? It's related to the same div id?

HTML template:

<div class="container" style="width:auto">
  <div class="progress" style="height:40px">
    <div id="occupied" class="progress-bar progress-bar-success" role="progressbar" style="width:0%; line-height:-moz-block-height; font-size:20px">

    </div>
  </div>
</div>

In js connector, when state change:

this.onStateChange = function() {
        var state = this.getState();
        console.log(state);
        percentage = state.percentage;
        console.log(percentage);
        comment = state.comment;
        console.log(comment);
        [b]$("#occupied").text(comment);
        $("#occupied").css("width", percentage);[/b]
    }

Then in the java class CustomerBarComponent:

public CustomerBarComponent(int percentage, String comment)
    {
        super();
        layout = new CustomLayout("capacitybarlayout");
        setCompositionRoot(layout);

        if(percentage >= 0 && percentage <= 100)
        {
            this.percentage = percentage + "%";
        }
        this.comment = comment;
        bar = new CapacityBar();
        bar.setPercentage(percentage);
        bar.setComment(comment);
        layout.addComponent(bar);
    }

Finally, in the java view class:

private void init()
    {
        addComponent(buildPanel());
        
    }
    
    private Panel buildPanel()
    {
        Panel panel = new Panel();
        VerticalLayout verticalLayout = new VerticalLayout();
        panel.setContent(verticalLayout);
        
        HorizontalLayout horizonLayout1 = new HorizontalLayout();
        [b]CustomerBarComponent [/b]bar = new CustomerBarComponent(20, "20% free space");
        bar.setWidth("600px");
        TextArea desc = new TextArea();
        desc.setValue("Description: ");
        horizonLayout1.addComponents(bar, desc);
        horizonLayout1.setComponentAlignment(bar, Alignment.MIDDLE_LEFT);
        verticalLayout.addComponent(horizonLayout1);
        
        HorizontalLayout horizonLayout2 = new HorizontalLayout();
        [b]CustomerBarComponent [/b]bar2 = new CustomerBarComponent(50, "50% free space");
        bar2.setWidth("600px");
        TextArea desc2 = new TextArea();
        desc2.setValue("Description: ");
        horizonLayout2.addComponents(bar2, desc2);
        horizonLayout2.setComponentAlignment(bar2, Alignment.MIDDLE_LEFT);
        verticalLayout.addComponent(horizonLayout2);
        
        return panel;
    }

Thank you.