How to toggleclass for each label checkboxes in jquery?

I want to toggle class for the below code but not working. I want to add the class "checkbox-active" to each label when clicked and remove that class if clicked again.

<div class="sc-97ae821b-0 kgLRyG">
    <label id="selector-wrapper" class="sc-dc4336f8-0 jEDHBt sc-b5b652d3-0 eRKHhZ sc-97ae821b-1 jqCZMD problem-label" tabindex="0">
    <input name="problemAreas" type="checkbox" class="sc-dc4336f8-1 hvrnmr" value="CHEST">

    <label id="selector-wrapper" class="sc-dc4336f8-0 jEDHBt sc-b5b652d3-0 eRKHhZ sc-97ae821b-1 jqCZMD problem-label" tabindex="0">
    <input name="problemAreas" type="checkbox" class="sc-dc4336f8-1 hvrnmr" value="HAND">
</div>

What I have tried:

$(function() {
   $('.sc-dc4336f8-0').click(function() { // when a .myDiv is clicked
     
     $(this).addClass('checkbox-active');

     if($(this).hasClass('checkbox-active')){
           $(this).removeClass('checkbox-active').addClass('checkbox-active');
           
       }
   })
 })

The above code is working but what I want is that I want to remove the class "checkbox-active" also onclick if that label already has the class "checkbox-active"

>Solution :

You can try below script. I have added "on()" function on input class.

$('.sc-dc4336f8-1').on('change', function() {
                        $(this).toggleClass('checkbox-active')});
})