Like/Unlike Buttons Modification JS

[tlphelp]

I have changed out the like/unlike buttons successfully in my forum ; however, once a user clicks "like," the display reverts back to the original "unlike" version rather than the image I've set it to be. How would I get it to display the correct image of "unlike?"

See here is what happens after pushing the "like" button:



This is what the code looks like...... I put the images into the phrases, umvote_cap and vote_cap.

<vb:if condition="!empty($controls['showVoteCtrl']) OR !empty($showAll)">
<vb:if condition="$conversation['permissions']['canvote']">
<li id="vote-{vb:var conversation.nodeid}" class="b-post-control b-post-control--responsive b-post-control__bubble-flyout-container js-post-control__vote {vb:if $conversation['nodeVoted'], voted}">
<span class="b-post-control__label"><vb:if condition="$conversation['nodeVoted']">{vbhrase unvote_cap}<vb:else />{vbhrase vote_cap}</vb:if></span>
<span class="bubble-flyout b-post-control__bubble-flyout">
<i></i>
<u></u>
<span class="bubble-content votecount {vb:if !$conversation['canseewholiked'], novotepopup}">{vb:number {vb:raw conversation.votes}}</span>
</span>
</li>

<vb:elseif condition="$conversation['votes'] > 0" />

<li id="votecount-{vb:var conversation.nodeid}" class="b-post-control votecount">
<span class="b-post-control__icon"></span>
<span class="b-post-control__label">{vb:number {vb:raw conversation.votes}} <vb:if condition="$conversation['votes'] > 1">{vbhrase likes_lower}<vb:else />{vbhrase like_lower}</vb:if></span>
</li>

</vb:if>

</vb:if>