Read more – Button in a regular Column

Hey there I would like a “read more” Text which shows hidden Text after clicking on it.
It almost works. But somehow it just works for the first column and the second column does not react.
Do you know why?

this is my backend:

Text-field in which is written “weiterlesen…” ( read more)
It has an ID “weiterlesen-link”
under this field is another field in which is the hidden text.

Now, the Java should be, that on click on the Id “weiterlesen-link” the hidden text is being shown. And, the click-Text in the ID should be on hidden.
why does this only work for Column 1? I want it for all :)

Perhaps you have a solution??

add_action('wp_footer', 'einbetten_custom_script');
function einbetten_custom_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var weiterlesenLink = document.getElementById("weiterlesen-link");
            var versteckterText = document.getElementById("versteckter-text");
            
            weiterlesenLink.addEventListener("click", function(event) {
                event.preventDefault();
                versteckterText.classList.remove("hidden");
                weiterlesenLink.style.display = "none";
            });
        });
    </script>
    <?php
}

Thanks!
monika