I am adding buttons based on an array. The problem I am having is that every time I add another name to the array, it prints out all the buttons not just the one I added. I am wondering how would I erase all the old buttons before I add the array of buttons.

Here is my code

```
        socket.on('usernames', function(data){
        console.log(data);
        for(i=0; i <data.length; i++){
            // html += data[i] + "<br/>";
            $input = $('<input type="button"/></br>');
            $input.val(data[i]);
            $input.appendTo($("#contentWrap"));
        }
        // $users.html(html);
    });

```

Below is an image. Test is the name of the first button and every time I add a new button it prints the entire array again. Is there a way to delete the old buttons?
[![enter image description here](https://i.stack.imgur.com/CNpk8.png)](https://i.stack.imgur.com/CNpk8.png)