Dodawanie klasy do klikniętego elementu

Witam serdecznie,
Mam taki moduł: http://serwer1356363.home.pl/_nauka/

Po kliknięciu na pozycje w popupie chciałbym żeby:

1. Do klikniętego elementu dodała się "ramka" (klasa selected-material) - w popupie
2. Zaznaczyła się wybrana opcja w select (to działa)
3. Popup zamknął się (to działa).

Mam 2 selekty i chciałbym żeby to wybieranie (oznaczanie ramkami )

Mój kod JS wygląda następująco:

$('body').on('click', '.select-material-body', function(e) {
        if($('.material-type-input').val() == 1){
            $(".select-material").removeClass("selected-material");
            $(this).addClass("selected-material");
            $('select[name=product-material-body]').val($(this).attr('id'));
            $('.product-material-body').selectpicker('refresh');
            $('#material-dialog-modal').modal('hide');
        } else{
            $(".select-material").removeClass("selected-material");
            $(this).addClass("selected-material");
            $('select[name=product-material-front]').val($(this).attr('id'));
            $('.product-material-front').selectpicker('refresh');
            $('#material-dialog-modal').modal('hide');
        }
    });

Html:

<div id="material-dialog-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body pt-0">
                    <h3 class="select-material-title px-3"></h3>
                    <form method="get" action="getMaterials" class="px-3 select-material-url">
                        <input type="hidden" name="type" value="" class="material-type-input">
                        <div class="inner-addon rounded-0 modal-search-form">
                            <i class="fa fa-search"></i>
                            <input type="text" class="form-control product-query-string-body"
                                placeholder="Szukaj produktu" aria-label="Wpisz nazwę lub kod koloru" name="query"
                                value="" />
                        </div>
                    </form>
                    <div class="row material-list px-5 pt-4 dynamic-materials">

                    </div>
                </div>
            </div>

        </div>
    </div>

Wie ktoś może jak to zrobić?

Bardzo proszę o pomoc

Zarówno dla IF jak i dla ELSE masz:

 $(".select-material").removeClass("selected-material");

zapewne stąd problem.

Freja Draco napisał(a):

Zarówno dla IF jak i dla ELSE masz:

 $(".select-material").removeClass("selected-material");

zapewne stąd problem.

Usunięcie tego elementu nie pomogło :(

Generalnie zrobiłem w tym .material-type-input wartość 1 lub 2 - w zależności od tego, jaki select jest klikamy.