Custom attribute making link disappear when publishing

Design help Custom code
1

Hello all. I do not wish to share my ENTIRE website so please forgive the screenshots. I’m hoping someone has encountered this issue before.

I have some social share icons on my page:

image

And the following script just before my tag:

<script>
    $(document).ready(function () {
        let title = document.title;
        let url = window.location.href;
        $('[data-share-facebook').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + url + '%2F&title=' + title + '%3F');
        $('[data-share-facebook').attr('target', '_blank');

        $('[data-share-twitter').attr('href', 'https://twitter.com/share?url=' + url + '%2F&title=' + title + '&summary=');
        $('[data-share-twitter').attr('target', '_blank');

        $('[data-share-linkedin').attr('href', 'https://www.linkedin.com/shareArticle?mini=true&url=' + url + '%2F&title=' + title + '&summary=');
        $('[data-share-linkedin').attr('target', '_blank');
        
        $('[data-share-whatsapp').attr('href', 'https://wa.me/?text=' + url);
        $('[data-share-whatsapp').attr('target', '_blank');
    });
</script>

When I preview in a browser, all the icons display:

image

I am trying to activate my social share buttons by assigning a custom attribute. Let’s take the Facebook icon for example, my link has the following:

image

When I assign the custom attribute however, the Facebook icon no longer appears when I publish:

image

I would appreciate any help on this matter.
Thank you.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I figured it out.

For some reason, whenever I added an actual link - it was being set to display: none;

I therefore used a manual override display: unset !important; - not ideal but it worked.

Thanks.