how to count click tab menu and insert to database

I have a tab menu with the following structure, clicking on which will add an active class to the li element
Now I need to count the number of clicks of each tab separately and more importantly save (insert) it in the database
Please help with an example how can I implement it?

<div class="tabs-shortcode tabs-wrapper container-wrapper tabs-vertical">
    <ul class="tabs">
        <li class="active">
            <a href="#tab-content-1"><img src="2019/08/medal.png" alt=""> Tab One</a>
        </li>
        <li class="">
            <a href="#tab-content-2"><img src="2020/07/maths.png" alt=""> Tab Two</a>
        </li>
        <li class="">
            <a href="#tab-content-3"><img src="2020/07/loan.png" alt="">Tab Three</a>
        </li>
    </ul>
    <div class="tab-content is-not-active" id="tab-content-1" style="min-height: 1311px; display: block;">
        <div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
    </div>
    <div class="tab-content is-not-active" id="tab-content-2" style="min-height: 1311px; display: none;">
        <div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
    </div>
    <div class="tab-content is-not-active" id="tab-content-3" style="min-height: 1311px; display: none;">
        <div class="tab-content-wrap tie-animate-slideInUp">Content is Here</div>
    </div>
</div>

BR