[SOLVED] HTML href variable value

HTML href variable value

Update : example of code at W3school tryit editor

In my webpage i have a feed of articles like 20, and under each one a Social Media Sharing Panel, to share each article, with code like this one :

<a href="http://www.facebook.com/sharer.php?u=HTTPURLTOSHARE">
  <i class="fab fa-facebook"></i>
</a>

So basically i have like several links like this for each social media service (let say 10, FB, TW, IG, etc) and the whole bunch for each article.
My question is : is there a way to write the SHARING DIV including all the sharing service links Once and for each article when clicked the share button just assign it's URL (HTTPURLTOSHARE) to the Social media sharing buttons, ?
I know it's possible server side but i am not familiar with front backend development.

Solution

This was not trivial

I made a template
I gave the popup links a data attribute with the URL of the article
I insert the template content after each link

window.addEventListener("load",function() {
  [...document.querySelectorAll("a[data-url]")]
    .forEach((lnk,i) => {
      const url = lnk.dataset.url;
      const pop = document.getElementById("sharer").content.cloneNode(true)
      pop.querySelector('.overlay').setAttribute("id",lnk.hash.slice(1)); 
      [...pop.querySelectorAll(".social-square a")].forEach(lnk => lnk.href = lnk.href.replace("SHARE",url))
     lnk.after(pop)
    })
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"  />
<!-- FIRST ARCITLE -->
<h1>We must stop calling Trump’s enablers ‘conservative.’ They are the radical right.</h1>
<p>You hear the word “radical” a lot these days. It’s usually aimed like a lethal weapon at Democratic office-seekers, especially those who want to unseat a Republican incumbent. Sen. Kelly Loeffler, the Georgia Republican, rarely utters her challenger’s name without branding him as “radical liberal Raphael Warnock.”</p>
<a href="#popup1" data-url="https://www.washingtonpost.com/lifestyle/media/trump-enablers-radical-right-conservative/2021/01/04/634edcda-4e97-11eb-b96e-0e54447b23a1_story.html">Share this article</a>


<!-- SECOND ARTICLE -->
<h1>An Insurgency From Inside the Oval Office</h1>
<p>President Trump’s effort to overturn the election he lost has gone beyond mere venting of grievances at the risk of damaging the very American democracy he is charged with defending.</p>
<a href="#popup2" data-url="https://www.nytimes.com/2021/01/04/us/politics/trump-biden-inauguration.html">Share this article</a>


<template id="sharer">
<!-- HERE START THE SHARING MODAL WINDOW and it will be repeated for each article, Only the article URL change so this is why i want to find a way to write this code once and assign only the URL for each article if possible -->
<div id="" class="overlay">
    <div class="popup"><a class="close" href="#"><i class="fas fa-times-circle"></i></a>
        <div class="content">
            <div class="shr-div">
                <!-- Facebook -->
                <div class="social-square fac" data-content="facebook">
                    <a href="http://www.facebook.com/sharer.php?u=SHARE" target="_blank"><i class="fab fa-facebook-f"></i></a>
                </div>
                <!-- Twitter -->
                <div class="social-square twi" data-content="twitter">
                    <a href="https://twitter.com/share?url=SHARE" target="_blank"><i class="fab fa-twitter"></i></a>
                </div>
                <!-- WhatsApp -->
                <div class="social-square wha" data-content="whatsapp">
                    <a href="whatsapp://send?text=SHARE" target="_blank"><i class="fab fa-whatsapp"></i></a>
                </div>
                <!-- Viber -->
                <div class="social-square vib" data-content="viber">
                    <a href="viber://forward?text=SHARE" target="_blank"><i class="fab fa-viber"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END OF THE SHARE MODAL WINDOW -->
</template>