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>

To have repeated elements perform the same action you need to use class selectors to target them, not id as the latter have to be unique within the DOM.

From there you can use a data attribute on the popup trigger to store the video location which should be shown in the popup. You can set that as the popup is displayed.

Here's a full working example with some other amendments made to your logic:

const $videoPopup = $('#video-popup');
const $videoContainer = $videoPopup.find('.iframe-src');
const $videoIframe = $videoContainer.find('iframe');

$('.video-icon').on('click', function(e) {
  e.preventDefault();
  $videoPopup.css('display', 'flex');
  $videoContainer.slideDown();
  $videoIframe.prop('src', $(this).data('video-url'));
  console.log(`Showing popup for ${$(this).data('video-url')}...`);
});

$videoPopup.on('click', function(e) {
  var $target = e.target.nodeName;
  if ($target != 'IFRAME') {
    $videoPopup.fadeOut();
    $videoContainer.slideUp();
    $videoIframe.prop('src', '');
  }
});

#video-popup {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a class="video-icon video-section prelative text-center white" role="button" aria-hidden="true" data-video-url="video-1-location.mp4">
  Play video 1
</a>
<a class="video-icon video-section prelative text-center white" role="button" aria-hidden="true" data-video-url="video-2-location.mp4">
  Play video 2
</a>

<div id="video-popup">
  <div class="video-src">
    <div class="iframe-src">
      <iframe src="the video link" allowfullscreen></iframe>
    </div>
  </div>
</div>