Как сохранить смену класса в localStorage с помощью jQuery - $(this)

Проблема в том, что при нажатии на любую из иконок, она работает как надо, но при обновлении страницы, вместо одной иконки, сохраняется активное значение всем иконкам. И тоже самое будет, если нажать на активную иконку, и обновить страницу. (Не понимаю как использовать $(this) в localStorage, или надо как-то по-другому делать.

Разметка

    <div class="post-div-aport-cont">
        <div class="post-div-aport-icon post-like">
            <svg class="pt-like" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17.25,1.851A6.568,6.568,0,0,0,12,4.558,6.568,6.568,0,0,0,6.75,1.851,7.035,7.035,0,0,0,0,9.126c0,4.552,4.674,9.425,8.6,12.712a5.29,5.29,0,0,0,6.809,0c3.922-3.287,8.6-8.16,8.6-12.712A7.035,7.035,0,0,0,17.25,1.851ZM13.477,19.539a2.294,2.294,0,0,1-2.955,0C5.742,15.531,3,11.736,3,9.126A4.043,4.043,0,0,1,6.75,4.851,4.043,4.043,0,0,1,10.5,9.126a1.5,1.5,0,0,0,3,0,4.043,4.043,0,0,1,3.75-4.275A4.043,4.043,0,0,1,21,9.126C21,11.736,18.258,15.531,13.477,19.539Z"/></svg>
            <svg class="pt-like-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"/></svg>
        </div>
        <div class="post-div-aport-icon">
            <svg class="pt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M24,11.246A12.011,12.011,0,1,0,12.017,24H18.5A5.507,5.507,0,0,0,24,18.5V11.34ZM21,18.5A2.5,2.5,0,0,1,18.5,21H12.017a9.041,9.041,0,0,1-6.731-3.011,8.926,8.926,0,0,1-2.227-7.034,9.038,9.038,0,0,1,7.788-7.882A9.484,9.484,0,0,1,12.02,3a8.933,8.933,0,0,1,5.739,2.066A9.038,9.038,0,0,1,21,11.389Z"/><path d="M9.5,11h3a1.5,1.5,0,0,0,0-3h-3a1.5,1.5,0,0,0,0,3Z"/><path d="M16.5,13h-7a1.5,1.5,0,0,0,0,3h7a1.5,1.5,0,0,0,0-3Z"/></svg>
            <svg class="pt-icon-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.675,2.758A11.936,11.936,0,0,0,10.474.1,12,12,0,0,0,12.018,24H19a5.006,5.006,0,0,0,5-5V11.309l0-.063A12.044,12.044,0,0,0,19.675,2.758ZM8,7h4a1,1,0,0,1,0,2H8A1,1,0,0,1,8,7Zm8,10H8a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Zm0-4H8a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z"/></svg>
        </div>
        <div class="post-div-aport-icon">
            <svg class="pt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19,14a4.969,4.969,0,0,0-3.818,1.811l-5.4-2.438A4.914,4.914,0,0,0,10,12a4.929,4.929,0,0,0-.211-1.359l5.394-2.45A4.972,4.972,0,1,0,14,5c0,.142.03.276.042.415L8.1,8.112A4.947,4.947,0,0,0,5,7,5,5,0,0,0,5,17a4.947,4.947,0,0,0,3.09-1.1l5.952,2.687c-.012.139-.042.272-.042.413a5,5,0,1,0,5-5ZM19,3a2,2,0,1,1-2,2A2,2,0,0,1,19,3ZM5,14a2,2,0,1,1,2-2A2,2,0,0,1,5,14Zm14,7a2,2,0,1,1,2-2A2,2,0,0,1,19,21Z"/></svg>
            <svg class="pt-icon-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.333,14.667A4.664,4.664,0,0,0,15.49,16.69l-6.5-2.935A4.665,4.665,0,0,0,9,10.261l6.494-2.949a4.665,4.665,0,1,0-.824-2.645,4.712,4.712,0,0,0,.067.792L7.846,8.587a4.667,4.667,0,1,0-.014,6.839l6.9,3.117a4.667,4.667,0,1,0,4.6-3.876Z"/></svg>
        </div>
    </div>
    <div class="post-div-aport-cont">
        <div class="post-div-aport-icon-right">
            <svg class="pt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17.5,0H6.5A5.507,5.507,0,0,0,1,5.5V20.472a3.5,3.5,0,0,0,6.044,2.4l4.912-5.2,5.013,5.25A3.5,3.5,0,0,0,23,20.51V5.5A5.507,5.507,0,0,0,17.5,0ZM20,20.51a.5.5,0,0,1-.861.345l-6.1-6.391A1.5,1.5,0,0,0,11.95,14h0a1.5,1.5,0,0,0-1.086.47l-6,6.345a.479.479,0,0,1-.549.122A.471.471,0,0,1,4,20.472V5.5A2.5,2.5,0,0,1,6.5,3h11A2.5,2.5,0,0,1,20,5.5Z"/></svg>
            <svg class="pt-icon-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M2.849,23.55a2.954,2.954,0,0,0,3.266-.644L12,17.053l5.885,5.853a2.956,2.956,0,0,0,2.1.881,3.05,3.05,0,0,0,1.17-.237A2.953,2.953,0,0,0,23,20.779V5a5.006,5.006,0,0,0-5-5H6A5.006,5.006,0,0,0,1,5V20.779A2.953,2.953,0,0,0,2.849,23.55Z"/></svg>
        </div>
    </div>
    <div class="post-div-aport-cont">
        <div class="post-div-aport-icon post-like">
            <svg class="pt-like" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17.25,1.851A6.568,6.568,0,0,0,12,4.558,6.568,6.568,0,0,0,6.75,1.851,7.035,7.035,0,0,0,0,9.126c0,4.552,4.674,9.425,8.6,12.712a5.29,5.29,0,0,0,6.809,0c3.922-3.287,8.6-8.16,8.6-12.712A7.035,7.035,0,0,0,17.25,1.851ZM13.477,19.539a2.294,2.294,0,0,1-2.955,0C5.742,15.531,3,11.736,3,9.126A4.043,4.043,0,0,1,6.75,4.851,4.043,4.043,0,0,1,10.5,9.126a1.5,1.5,0,0,0,3,0,4.043,4.043,0,0,1,3.75-4.275A4.043,4.043,0,0,1,21,9.126C21,11.736,18.258,15.531,13.477,19.539Z"/></svg>
            <svg class="pt-like-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"/></svg>
        </div>
        <div class="post-div-aport-icon">
            <svg class="pt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M24,11.246A12.011,12.011,0,1,0,12.017,24H18.5A5.507,5.507,0,0,0,24,18.5V11.34ZM21,18.5A2.5,2.5,0,0,1,18.5,21H12.017a9.041,9.041,0,0,1-6.731-3.011,8.926,8.926,0,0,1-2.227-7.034,9.038,9.038,0,0,1,7.788-7.882A9.484,9.484,0,0,1,12.02,3a8.933,8.933,0,0,1,5.739,2.066A9.038,9.038,0,0,1,21,11.389Z"/><path d="M9.5,11h3a1.5,1.5,0,0,0,0-3h-3a1.5,1.5,0,0,0,0,3Z"/><path d="M16.5,13h-7a1.5,1.5,0,0,0,0,3h7a1.5,1.5,0,0,0,0-3Z"/></svg>
            <svg class="pt-icon-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.675,2.758A11.936,11.936,0,0,0,10.474.1,12,12,0,0,0,12.018,24H19a5.006,5.006,0,0,0,5-5V11.309l0-.063A12.044,12.044,0,0,0,19.675,2.758ZM8,7h4a1,1,0,0,1,0,2H8A1,1,0,0,1,8,7Zm8,10H8a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Zm0-4H8a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z"/></svg>
        </div>
        <div class="post-div-aport-icon">
            <svg class="pt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19,14a4.969,4.969,0,0,0-3.818,1.811l-5.4-2.438A4.914,4.914,0,0,0,10,12a4.929,4.929,0,0,0-.211-1.359l5.394-2.45A4.972,4.972,0,1,0,14,5c0,.142.03.276.042.415L8.1,8.112A4.947,4.947,0,0,0,5,7,5,5,0,0,0,5,17a4.947,4.947,0,0,0,3.09-1.1l5.952,2.687c-.012.139-.042.272-.042.413a5,5,0,1,0,5-5ZM19,3a2,2,0,1,1-2,2A2,2,0,0,1,19,3ZM5,14a2,2,0,1,1,2-2A2,2,0,0,1,5,14Zm14,7a2,2,0,1,1,2-2A2,2,0,0,1,19,21Z"/></svg>
            <svg class="pt-icon-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.333,14.667A4.664,4.664,0,0,0,15.49,16.69l-6.5-2.935A4.665,4.665,0,0,0,9,10.261l6.494-2.949a4.665,4.665,0,1,0-.824-2.645,4.712,4.712,0,0,0,.067.792L7.846,8.587a4.667,4.667,0,1,0-.014,6.839l6.9,3.117a4.667,4.667,0,1,0,4.6-3.876Z"/></svg>
        </div>
    </div>
    <div class="post-div-aport-cont">
        <div class="post-div-aport-icon-right">
            <svg class="pt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17.5,0H6.5A5.507,5.507,0,0,0,1,5.5V20.472a3.5,3.5,0,0,0,6.044,2.4l4.912-5.2,5.013,5.25A3.5,3.5,0,0,0,23,20.51V5.5A5.507,5.507,0,0,0,17.5,0ZM20,20.51a.5.5,0,0,1-.861.345l-6.1-6.391A1.5,1.5,0,0,0,11.95,14h0a1.5,1.5,0,0,0-1.086.47l-6,6.345a.479.479,0,0,1-.549.122A.471.471,0,0,1,4,20.472V5.5A2.5,2.5,0,0,1,6.5,3h11A2.5,2.5,0,0,1,20,5.5Z"/></svg>
            <svg class="pt-icon-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M2.849,23.55a2.954,2.954,0,0,0,3.266-.644L12,17.053l5.885,5.853a2.956,2.956,0,0,0,2.1.881,3.05,3.05,0,0,0,1.17-.237A2.953,2.953,0,0,0,23,20.779V5a5.006,5.006,0,0,0-5-5H6A5.006,5.006,0,0,0,1,5V20.779A2.953,2.953,0,0,0,2.849,23.55Z"/></svg>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

jQuery

$(document).ready(()=>{
    if (localStorage.getItem('icons') == false){
        $(".post-div-aport-icon, .post-div-aport-icon-right").removeClass('pst-ap-ic-active');
    }
    else{
        $(".post-div-aport-icon, .post-div-aport-icon-right").addClass(localStorage.getItem('icons'));
    }
});

$(".post-div-aport-icon, .post-div-aport-icon-right").on('click', function(){
    $(this).toggleClass('pst-ap-ic-active');
    if($(this).hasClass('pst-ap-ic-active')){
        localStorage.setItem('icons', 'pst-ap-ic-active');
    }
    else{
        localStorage.setItem('icons', false);
    }
});

CSS

.post-div-aport-cont {
    display: flex;
    align-items: center;
    align-content: center;
}

.post-div-aport-icon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    fill: rgb(0, 0, 0);
    transition: .3s;
    cursor: pointer;
}

.pt-like-bg {
    display: none;
}

.pst-ap-ic-active .pt-like {
    display: none;
}

.pst-ap-ic-active .pt-like-bg {
    display: block;
    fill: rgb(197, 0, 0);
}

.pt-icon-bg {
    display: none;
}

.pst-ap-ic-active .pt-icon {
    display: none;
}

.pst-ap-ic-active .pt-icon-bg {
    display: block;
    fill: rgb(197, 0, 0);
}

.post-div-aport-icon:hover {
    fill: rgb(197, 0, 0);
}

.post-div-aport-icon-right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    fill: rgb(0, 0, 0);
    transition: .3s;
    cursor: pointer;
    margin-left: 10px;
}

.post-div-aport-icon-right:hover {
    fill: rgb(197, 0, 0);
}