Kilka eventów pod jedno działanie

Witam serdecznie. Mam oto taki kod wykonywany poprzez użycie określonego input id:

 
            $(document).on('click', '#button-sort', function() {
            var filterSelect = $("#filterSelect").val();
            var searchOption = $("#searchOption").val();
            var searchPhrase = $("#searchPhrase").val();
            var params1 = $(this).attr("sort");
            var params2 = $(this).attr("order");
            var url = "{{restUrl}}cases/caselistsorted/"+filterSelect+"/"+searchOption+"/"+searchPhrase+"/"+params1+"/"+params2;
            $.ajax({
                type: 'GET',
                url: url,
                data: null,
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        console.log(url);
                        $(".case-list").html(data["code"]);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("Error: " + textStatus + " " + url);
                }
            });
        });

I chciałbym podłączyć go pod kilka eventów klikniecia, wybrania opcji z selecta i robię to w ten sposób:

 


    function sendParam(){

        var filterSelect = $("#filterSelect").val();
        var searchOption = $("#searchOption").val();
        var searchPhrase = $("#searchPhrase").val();
        var params1 = $(this).attr("sort");
        var params2 = $(this).attr("order");
        var url = "{{restUrl}}cases/caselistsorted/"+filterSelect+"/"+searchOption+"/"+searchPhrase+"/"+params1+"/"+params2;
        $.ajax({
            type: 'GET',
            url: url,
            data: null,
            dataType: 'json',
            success: function (data) {
                if (data != null) {
                    console.log(url);
                    $(".case-list").html(data["code"]);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("Error: " + textStatus + " " + url);
            }
        });

        $(document).on('click', '#button-sort', function() {
            sendParam();
        });
        $(function() {
            $('#filterSelect').change(function () {
            sendParam();
            });

Problem zaczyna się tutaj:

        var params1 = $(this).attr("sort");
        var params2 = $(this).attr("order");

Ponieważ gdy zamienię to na:

        var params1 = $('#button-sort').attr("sort");
        var params2 = $('#button-sort').attr("order");
 

Pobiera cały czas ten sam parametr dla sort i order a każdy input ma inny. Wina leży po tej stronie że mam około 10 input id="#button-sort" tyle że każdy ma inny parametr sort i order, który jest wysyłany po kliknięciu. Wszystko działa dobrze gdy używam pierwszej opcji ale jak chce podpiąć działanie pod kilka funkcji jest już problem z prawidłowym pobraniem tych paramterów - pobiera cały czas tylko z pierwszego input id parametry sort i order. Jak mogę rozwiązać ten problem i co radzicie? Pozdrawiam

PS to moje inputy:

<input type="image" src="view/img/arrowup.png" sort="createDate" order="asc" id="button-sort" onmouseover="this.src = 'view/img/arrow-change-up.png'" onmouseout="this.src = 'view/img/arrowup.png'"/>
<input type="image" src="view/img/arrowdown.png" sort="createDate" order="desc" id="button-sort"  onmouseover="this.src = 'view/img/arrow-change-down.png'" onmouseout="this.src = 'view/img/arrowdown.png'" />
 

Po pierwsze id elementu html jest UNIKATOWE. Nie powinieneś mieć dwóch elementów o tym samym id na stronie. Jeżeli chcesz dla nich wspólne zachowanie nadaj im wspólną klasę css.
Po drugie używasz this w funkcji, która nie ma kontekstu obiektu (czy jak to się fachowo w js nazywa). this w setParam() jest zapewne undefined

To co bym tutaj proponował:

1. Nadaj elementom klasę css - niech będzie sort-button
2. Podpinanie zdarzenia zmień na taki:

$('.sort-button').on('click', function() {
   sendParam(this);

A w ogóle dlaczego podpinasz zdarzenie w sendParam() które wywołuje sendParam() ? Powinieneś podpinać zdarzenia na początku skrypty i najlepiej tak:

$(document).on('ready', function(){
   $('.sort-button').on('click', function() {
      sendParam(this);
   });
});

3. Dodajesz parametr do metody i wykorzystujesz zamiast this:

function sendParam(element){
   var params1 = $(element).attr("sort");
   var params2 = $(element).attr("order");

Powinno pomóc.

Zrobiłem wszystko jak mówisz i nadal rzuca mi undefinedem :(

Wrzucę kod bo może gdzieś popełniłem jakiś głupi błąd

function sendParam(element) {
                    var filterSelect = $("#filterSelect").val();
                    var searchOption = $("#searchOption").val();
                    var searchPhrase = $("#searchPhrase").val();
                    var params1 = $(element).attr("sort");
                    var params2 = $(element).attr("order");
                    var url = "{{restUrl}}cases/caselistsorted/" + filterSelect + "/" + searchOption + "/" + searchPhrase + "/" + params1 + "/" + params2;
                    $.ajax({
                        type: 'GET',
                        url: url,
                        data: null,
                        dataType: 'json',
                        success: function (data) {
                            if (data != null) {
                                console.log(url);
                                $(".case-list").html(data["code"]);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log("Error: " + textStatus + " " + url);
                        }
                    });
                }
 

$(document).on('ready', function(){
                    $('.button-sort').on('click', function() {
                        sendParam(this);
                    });
                });

Oczywiście zrobiłem sobie klasę css:

 
<div class="button-sort">
            <input type="image" src="view/img/arrowup.png" sort="createDate" order="asc" onmouseover="this.src = 'view/img/arrow-change-up.png'" onmouseout="this.src = 'view/img/arrowup.png'"/>
            <input type="image" src="view/img/arrowdown.png" sort="createDate" order="desc"onmouseover="this.src = 'view/img/arrow-change-down.png'" onmouseout="this.src = 'view/img/arrowdown.png'" />
        </div>

Popatrzmy co się dzieje:

$('.button-sort')

Pobiera element

<div class='button-sort'>

Który jest przekazywany do funkcji, więc:

$(element).attr("sort");

pobiera atrybut sort z elementu div

Czy już wiesz gdzie jest błąd?

Dobra już wiem jak to zrobić do Inputów dodać klasę a nie w oddzielnych divach :)

Dzięki za pomoc! :)

EDIT:
Mam ostatni problem i nie wiem jak go rozwikłać :/
Mianowicie gdy chce posortować tablicę a nie wpisze nic w wyszukiwarkę mam błąd:

 
"Error: error https://localhost/cm/rest/cases/caselistsorted/no-filter/search_customer//casetype/asc"

Co na to zaradzić?