pin entry

Hi am creating a view which show how many digits have been entered of my pin entry screen, the pin entry screen consists of 10 buttons labeled 0 - 9 and when a button is pressed a dot is displayed above the button keypad. but it seems to move the dot along instead of adding another. I think this is not a good way of achieving this but i can think of another way. my current code:

var self = Ti.UI.createWindow({
        backgroundColor:'white',
        layout: 'vertical'
    });
 
    var pin = [];
    var dot = Ti.UI.createLabel({
        text: ".",
        width: "25%",
        font: {
            fontSize: 100 }
    });
 
    var press = Ti.UI.createWindow({
        backgroundColor:'red',
        height: 100,
        layout: 'horizontal'
    });
 
    self.add(press);
    var butView = Ti.UI.createView({
        backgroundColor:'white',
        layout: 'horizontal'
    });
 
    var but1 = Ti.UI.createButton({
        height: 90,
        width: "33%",
        title: "1"
 
    });
    but1.addEventListener('click',function(e){
        pin.push(1);
        if(pin.length > 3){
            alert(pin[0]+","+pin[1]+","+pin[2]+","+pin[3]);
        }
        press.add(dot);
    });
 
 
    self.add(butView);
    self.open();

Please note I have taken out most button as the code is long but they are a repeat of but1.

As you can see I add the dot to the view when a button is pressed. but this just moved the dot allong.