Custom attribute making link disappear when publishing

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:


And the following script just before my tag:

    $(document).ready(function () {
        let title = document.title;
        let url = window.location.href;
        $('[data-share-facebook').attr('href', '' + url + '%2F&title=' + title + '%3F');
        $('[data-share-facebook').attr('target', '_blank');

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

        $('[data-share-linkedin').attr('href', '' + url + '%2F&title=' + title + '&summary=');
        $('[data-share-linkedin').attr('target', '_blank');
        $('[data-share-whatsapp').attr('href', '' + url);
        $('[data-share-whatsapp').attr('target', '_blank');

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


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:


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


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)

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.