HTML Ajax Преобразование опции выбора в кнопки не отправляет параметры

Question

У меня есть эта опция выбора:

<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>

который называет это 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);
        }
    });
}

Я хочу преобразовать их в три кнопки, подобные этой

<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>

Но параметр не отправляется.

Я пытался переместить имя, идентификатор и onClick на каждую кнопку, любую комбинацию, которую я могу придумать, но она все равно не работает.

Что мне здесь не хватает?

Примечание: я не ищу решение CSS, если это возможно.

Answer 1

Вместо этого я отправил значение из функции rank ():

<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>

Затем сформировал json в 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);
        }
    });
}