[JavaScript]Dodawanie klasy do klikniętego elementu Opcje

[trifek]

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:

[HTML] pobierz, plaintext 
$('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] pobierz, plaintext 

Html:

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext 

Wie ktoś może jak to zrobić?

Bardzo proszę o pomoc

[viking]

https://prophp.pl/article/28/propagacja_i_d...en_w_javascript

[trifek]

[HTML] pobierz, plaintext 
$('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] pobierz, plaintext 

Mam dodane akcje po kliknięciu.... Tylko zamykanie modela i oznaczanie selecta - działa poprawnie, a oznaczanie ramką (dodanie wspomnianej powyżej klasy) - już nie.

Zobacz proszę "na żywo" podgląd: http://serwer1356363.home.pl/_nauka/

[viking]

No i napisałem ci jak to zrobić. this oznacza body. To są podstawy JS które trzeba poznać.