I am making a forum with votes currently.

If I go into a post, it would look like this.

* The Post
	+ Answer
	+ Answer
	+ Answer
	+ and so on...

I have methods to call meteor.methods when upvote and downvote, undownvote and unvote is clicked. It inserts the user to downvoters, upvoters, inc or inc -1 votes etc.

Then I have the following code to disable the opposite button if clicked.

For example, when upvote is clicked, the downvote is disabled. when downvote is clicked, upvote is disabled.

**Template.answerItem.rendered**

```
Template.answerItem.rendered = function() {
    if( $('#upvote').hasClass('unvote') ) {
        $('#downvote').attr('disabled', 'disabled');
    }

    if( $('#downvote').hasClass('undownvote')) {
        $('#upvote').attr('disabled', 'disabled');
    }
}

```

The problem is that if I have more than one answers in a thread, this will apply to all the answerItems instead of just the one answerItem that it has been applied to. 

For example, if I click `upvote` in `answer1`, `downvote` will be disabled in both `answer1` and `answer2`.

answers are loaded as followings

**Within the thread(post)**

```
{{#each answers}}
    {{> answerItem}}
{{/each}}

```

How would I make it so that the code I have only applies to the(one) answerItem so that it functions separately for each `answerItem`?

**EDIT1**
---------

### updated information(code)

**HTML voting snippet of Template.answerItem**

```
<div class = "voting-container">
    <button id="upvote" class="upvote {{upvotedClass}}">
        <span class="glyphicon glyphicon-triangle-top"></span>
    </button>

    <div class = "voteCount-container"> 
        <span>{{votes}}</span>  <!--To retrieve votecount from answers collection-->
    </div>

   <button id="downvote" class="downvote {{downvotedClass}}">
        <span class="glyphicon glyphicon-triangle-bottom"></span>
    </button>               
</div>

```

**Template.answerItem.rendered**

```
Template.answerItem.rendered = function() {
    var $downvote = this.$('.downvote');
    var $upvote = this.$('.upvote');

    if($upvote.hasClass('unvote'))
        $downvote.attr('disabled', 'disabled');

    if($downvote.hasClass('undownvote'))
        $upvote.attr('disabled', 'disabled');
}

```

**Template.answerItem.helpers**

```
Template.answerItem.helpers({

    upvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.upvoters, userId)) {
            return 'upvotable';
        }  else {
            return 'unvote';
        }    
    },
    downvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.downvoters, userId)) {
            return 'downvotable';
        } else {
            return 'undownvote';
        }
    }

});

```

**Template.answerItem.events**

```
Template.answerItem.events({

    'click .upvotable': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', true);
    Meteor.call('upvoteAnswer', this._id);
    },

    'click .unvote': function(e) {
    e.preventDefault();
    $('.downvotable').prop('disabled', false);
    Meteor.call('unvoteAnswer', this._id);
    },

    'click .downvotable': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', true);
    Meteor.call('downvoteAnswer', this._id);
    },

    'click .undownvote': function(e) {
    e.preventDefault();
    $('.upvotable').prop('disabled', false);
    Meteor.call('undownvoteAnswer', this._id);
    }

})

```