Dinamic section hide in Jetengine listing

Question

I'm trying to do a code to hide/show a section on my listing, but the code just hide/show the first post of the listing.

If I click in the second post, it hide/show only the section of the first post.

If I click in the third, only hide/show the section of the first post.

And so on. Every post that I create, only hide/show the section of the first post.

I'm using this code in a HTML widget:

<button class="shbt" onclick="myFunction()"> <i class="fa fa-comment"> </i> </button>

<style>
    .shbt {
        background-color: black;
        border: none;
        color: white;
        padding: 0px;
        font-size: 26px;
        cursor: pointer;
    }
    
    #sechide {
        display: none;
    }
    
    .secshow {
        display: block !important;
    }
</style>

<script>
    function myFunction() {
        var element = document.getElementById("sechide");
        element.classList.toggle("secshow");
    }
</script>

The section that I want to show/hide is the "sechide"

I tried to use the section as a "post ID" or current post and even tried to change the code, but I'm pretty bad on coding for now :´(

Hope I could explain it well. But if necessary I can try to explain it better.