JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
  <button type="button" data-id="N">16-50mm</button>
  <button type="button" data-id="J">25-75mm</button>
  <button type="button" data-id="M">30-50mm</button>
  <button type="button" data-id="G">50-120mm</button>
  <button type="button" data-id="K">50-100mm</button>
  <button type="button" data-id="A">75-200mm</button>
  <button type="button" data-id="C">75-200mm</button>
  <button type="button" data-id="F">75-150mm</button>
</aside>

<section id="N">
  <figure>
    <a href="A1.html">
      <img src="Images/000-001.jpg" alt="Image1 A1">
    </a>
    <br>
    <figcaption>Name</figcaption>
  </figure>
</section>

<section id="J">
  <figure>
    <a href="A1.html">
      <img src="Images/000-001.jpg" alt="Image2 A1">
    </a>
    <br>
    <figcaption>Name2</figcaption>
  </figure>
</section>

CSS

section {
    display: none;
}

JavaScript

$('aside button').click(function() {
  $('section').hide().filter('#' + $(this).data('id')).show();
});