Repeated Html tabs

Hi,
I’m trying to add a tabbed navigation on my WordPress site using the following tutorial:
https://css-tricks.com/functional-css-tabs-revisited/
Basically, im using this code for the tabbed navigation:

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked="checked">
       <label for="tab-1">??????? ??????</label>
       <div class="content">
           content here
       </div>
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">??????</label>

       <div class="content">
             content here
       </div>
   </div>
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">???????</label>
       <div class="content">
             content here
       </div>
   </div>

</div>

All of my posts contains this tabbed navigation.
At the search results page, all of the searched posts are displayed and all of them contains these tabs. i have noticed that the tabs works only in the first post and does not work on the remaining posts.
Any idea on how to fix it?

Thanks!