Execute the same javascript function from different onclick events

I have the following javascript code that plays a video when I click the “play” button in HTML.

How can I play different videos (multiple play buttons in HTML) without duplicating the JavaScript code?

$('#video-icon').on('click', function(e) {
  e.preventDefault();
  $('.video-popup').css('display', 'flex');
  $('.iframe-src').slideDown();
});

$('.video-popup').on('click', function(e) {
  var $target = e.target.nodeName;
  var video_src = $(this).find('iframe').attr('src');
  if ($target != 'IFRAME') {
    $('.video-popup').fadeOut();
    $('.iframe-src').slideUp();
    $('.video-popup iframe').attr('src', " ");
    $('.video-popup iframe').attr('src', video_src);
  }
});

<a class="video-section prelative text-center white" role="button" id="video-icon" aria-hidden="true">
  Play
  <div class="video-popup">
    <div class="video-src">
      <div class="iframe-src">
        <iframe src="the video link" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</a>