jQuery addClass not getting added on click

I am trying to create a custom select button. I am not sure why the class selected is not getting added the to option that I am selecting.

Pls help

jQuery(document).ready(function($) {   $('.pgggo-flt-control-select-inner').on('click', () => {     $('.pgggo-select-options').toggleClass('open');   });     $('.pgggo-select-options').on('click', 'pgggo-select-option', function(){     $(this).find('.pgggo-select-option').addClass('selected');   });    });

.pgggo-flt-control-select {    cursor: pointer;    position: absolute;    user-select: none;    width: 60%;  }    .pgggo-flt-control-select-inner {    position: relative;  }    .selected{    background: yellow;  }    .pgggo-select-options {    position: absolute;    top: 100%;    right: 0px;    width: 100%;    visibility: hidden;    opacity: 0;    pointer-events: none;  }    .open{    opacity: 1;    visibility: visible;    pointer-events: all;  }    .pgggo-flt-control-trigger {    display: grid;    grid-template-columns: 88% 12%;  }    .pgggo-select-option-default {    padding: 15px;    display: flex;    align-items: center;    background: yellow;    color: white;  }    .pgggo-select-option-icon {    padding: 15px;    display: flex;    align-items: center;    justify-content: center;    background: green;    color: white;  }    .pgggo-select-option {    padding: 15px;    background: red;    color: white;    border-bottom: 1px solid white;    width: 100%;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <div class="pgggo-flt-control pgggo-flt-control-select">    <div class="pgggo-flt-control-select-inner">      <div class="pgggo-flt-control-trigger">        <div class="pgggo-select-option-default">Select</div>        <div class="pgggo-select-option-icon"><span class="dashicons dashicons-arrow-down-alt2"></span></div>      </div>      <div class="pgggo-select-options">        <div class="pgggo-select-option" data-value="tesla">Tesla</div>        <div class="pgggo-select-option" data-value="volvo">Volvo</div>        <div class="pgggo-select-option" data-value="mercedes">Mercedes</div>      </div>    </div>  </div>

This is what I have tried but it not working. I am not sure what is wrong.

I believe all the details explains what is my problem.

addClass does not seems to adding any class when clicked

Please help.

https://stackoverflow.com/questions/66513043/jquery-addclass-not-getting-added-on-click March 07, 2021 at 11:54AM