Thumbs up & down: two votes possible

On the demo here, I can click on "Like" and then on "Dislike", and the vote on "Like" is still there.

I would be better, when I click the "Dislike", my vote on "Like" would transfer to "Dislike"

<span class="glyphicon glyphicon-thumbs-up onclick" aria-hidden="true" aria-value="214" id="UP214"> 2 </span><span class="glyphicon glyphicon-thumbs-down onclick" aria-hidden="true" aria-value="214" id="DOWN214"> 0 </span>
-------------------------------------------------
//class update onclick

$(".onclick").one("click",function(){
var id = $(this).attr("aria-value");
$.ajax({
url : "/widget/com",
type: "POST",
data : {"type": "dislike","id":id},
success: function(data)
{
$("#DOWN"+id).text(" " +data);
}
});
$(this).text(d + "v");
});

<span class="glyphicon glyphicon-thumbs-up onclick" data-id="UP" data-value="like" aria-hidden="true" aria-value="214" id="UP214"> 2 </span><span class="glyphicon glyphicon-thumbs-down onclick" data-id="DOWN" data-value="dislike" aria-hidden="true" aria-value="214" id="DOWN214"> 0 </span>

$(".onclick").one("click",function(){
var id = $(this).attr("aria-value");
var data_id = $(this).attr("data-id");
var data_value = $(this).attr("data-value");
$.ajax({
url : "/widget/com",
type: "POST",
data : {"type": data_value,"id":id},
success: function(data)
{
$("#"+data-id+id).text(" " +data);
}
});
$(this).text(d + "v");
});