HTML Ajax Converting select option into buttons doesn't send parameters - html

Question

I have this select option:
<select name="rank" id="rankvalue" onChange="rank({{$thisData->id}})">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
which is calling this Ajax:
function rank(id)
{
$.ajax({
type:"POST",
url: "{{ url('do_sort') }}"+"/"+id,
dataType: "json",
cache: false,
data: $('#rankvalue').serialize(),
success: function(data){
console.log(data);
},
error: function (data) {
console.log(data);
}
});
}
I want to convert them into three buttons like this
<div name="rank" id="rankvalue" onClick="rank({{$thisData->id}})">
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
</div>
But the parameter doesn't get sent.
I have tried moving name, id, and onClick on each button, any combination I can think of, but it still doesn't work.
What am I missing here?
Note: I'm not looking for CSS solution if possible.

Answer 1

I ended up sending the value from function rank() instead:
<div>
<button onClick="rank({{$thisData->id}},1)">1</button>
<button onClick="rank({{$thisData->id}},2)">2</button>
<button onClick="rank({{$thisData->id}},3)">3</button>
</div>
Then form the json in ajax.
function rank(id,value)
{
$.ajax({
type:"POST",
url: "{{ url('do_sort') }}"+"/"+id,
dataType: "json",
cache: false,
data: {
'rank': value
},
success: function(data){
//$("#contentdata").load(" #contentdata");
console.log(data);
getRank();
},
error: function (data) {
console.log(data);
}
});
}