How to create a HTML button that when clicked, clicks on multiple HTML social media buttons?

So I have a bunch of HTML buttons that I got from various social media platforms. I want to create a button that clicks on all the social media follows so the user could follow on all platforms without doing much work. Any ideas on how I can do this/what to look into? Thanks so much for your time!

Heres what I got so far:

<html>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/facebook/" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>

<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false">Follow</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="youtube" data-layout="default" data-count="hidden"></div>


<iframe src="https://open.spotify.com/follow/1/?uri=spotify:artist:4O15NlyKLIASxsJ0PrXPfz&size=basic&theme=light&show-count=0" width="200" height="24" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowtransparency="true"></iframe>

<button type="button" onclick="alert('placeholder')">Follow All Socials</button>

</body>

</html>

Solution

Here is an example with jQuery;

$('button').click(function() {
  console.log($(this).text());
});
$('.trigger').click(function() {
  $('.click').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="trigger">Trigger clicks on the other buttons</button>
<br>
<br>
<button class="click">Button 1</button>
<br>
<button class="click">Button 2</button>
<br>
<button class="click">Button 3</button>
<br>
<button class="click">Button 4</button>

Here is an example without jQuery:

function myFunction(x) {
  console.log(x.textContent);
}
function triggerFunction() {
  var click = document.getElementsByClassName('click');
  for (i=0;i<click.length;i++) {
    click[i].click();
  }
}

<button class="trigger" onclick="myFunction(this); triggerFunction()">Trigger clicks on the other buttons</button>
<br>
<br>
<button class="click" onclick="myFunction(this)">Button 1</button>
<br>
<button class="click" onclick="myFunction(this)">Button 2</button>
<br>
<button class="click" onclick="myFunction(this)">Button 3</button>
<br>
<button class="click" onclick="myFunction(this)">Button 4</button>