How can I create a Jquery XHR for images from an api and change images with an onclick function?

Question

Good afternoon everyone.

I'm attempting to display a set of images in a div, and use JQuery to fetch images from an API that changes the set of images when one of the header options are clicked. Any ideas?

Trying to get a set of four 'set' images from an api, then, display a different set when one of the options is clicked. The preferred method would be Jquery, but it seems like I'm not finding a lot of documentation on how to proceed. I apologize if this question is below you, but any help is greatly appreciated. Thank you.

HTML

<div id="first-div">
  <div id="div-holder">
    <h2></h2>
    <div class="image-links">

The options below should all be set with an initial set of images from a remote api and when each option is clicked, a new set of images is displayed.

<div class="option"><a href=""></a>Articles</div>
                        
<div class="option"><a href=""></a>Videos</div>
                        
<div class="option"><a href=""></a>Facts & Hacks</div>
                        
<div class="option"><a href=""></a>Infographics</div>
                        
<div class="option"><a href=""></a>Link Meanings</div>
                    
</div>

CSS

#first-div{
  background-color: #fafafb;
  padding: 5rem 0;
  border-bottom: .05rem solid #ddd;
}

.div-holder {
  width: 90%;
  margin: 0 auto;
  max-width: 64rem;
}

.image-links {
  border-bottom: .05rem solid #ddd;
  max-width: 43rem;
  margin: 0 auto 2rem;
  text-align: center;
  display: flex;
}