Should I create a JavaScript module for a collection of elements, or just a single element?

I'm using the model pattern with javaScript + Mustache to create a page where a set of subscribers can set their favorite topics (so that they can receive favorite posts from their publishers - this isn't a part of the question for now). Here is my index.html file.

<div id='subscriber-module'>
    <div id='subscriber-template'>
    
    <div class='subscriber'>
        <p></p>
        <input type='text' class='form-control' placeholder='Add Topic'>
        <button class='btn btn-default subscribe'>Subscribe</button>
        <ul>
            
            <li> 
            
        </ul>
    </div>
    
    </div>
</div>

I know the subscriber-template tag is redundant, but I was fiddling around with it so much that it was just better to leave it there because the javaScript code references this.

var Subscribers = (function(){

    var Subscribers = ['Ajay', 'Thor', 'Slick','Sassy','R2'];
    var topics = ['Cars','Halthor','Kites'];

    var notifications = [{
        topic:'Halthor',
        payload:'There was a battle here'
    },{
        topic:'Cars',
        payload:'Fast Pieces of shit'
    }];

    this.$el = $('#subscriber-module')
    this.$ul = $el.find('ul')
    this.$textbox = $el.find('input[type=text]')
    this.$button = $el.find('.subscribe');
    var template = $el.find('#subscriber-template').html();

    //bindEvents
    $el.delegate('.subscribe','click',addTopic)

    _render();

    function _render(){
        data = {
            Subscribers: Subscribers,
            notifications: notifications
        }

        $el.html(Mustache.render(template, data))
    }

    function addSubscriber(value){
        console.log('typeof value in add Subscribers: ' + typeof value)
        Subscribers.push(value);
        _render();
    }

    function reomoveSubscriber(value){
        console.log('typeof value in remove Subscribers: ' + typeof value)
        indx = Subscribers.indexOf(value)
        if(indx != -1) Subscribers.splice(indx, 1)
        _render()
    }

    function addTopic(event){
        topic = $(event.target).siblings('input')[0].value
        topics.push(topic);
        console.log(topics)
    }

    // Haven't worked on this yet
    function removeTopic(value){
        alert(typeof value)
        indx = Subscribers.indexOf(value)
        if(indx != -1) topics.splice(indx,1);
    }

    return {
        remove: reomoveSubscriber,
        add: addSubscriber,
        addTopic: addTopic,
        removeTopic: removeTopic
    }

})()

The Subscribers module holds the content for all subscribers. But there are some parts of the code above that doesn't make sense. Subscribers.addTopic(), for example, will add a topic to all subscribers. This shouldn't be the case. Every subscriber should have their own topics. Should I add a subscriber module with the addTopic,removeTopic and notifications instead of the Subscribers module? If so, how should I make the Subscribers and Subscriber modules co-exist?

For starters, I thought of adding to the HTML code like so:

<div id='subscriber-module'>
    <div id='subscriber-template'>
    
    <div class='subscriber'>
        
        <p></p> //Should this dot even be here now?
        <input type='text' class='form-control' placeholder='Add Topic'>
        <button class='btn btn-default subscribe'>Subscribe</button>
        <ul>
            
            <li> 
            
        </ul>
        
    </div>
    
    </div>
</div>

But I'm now at a loss. How should I proceed? I don't think the Pubsub pattern is required just yet. There is no "publisher" now. If possible, could you code the structure of the module pattern for this question? Is it better to have a module for a class of objects (Subscribers), or just for a single subscriber, or both?