How can I define which element jquery should use?

I'm trying to do a gallery so I got this while and every image has a different ID but when clicking the image I did a function to open it and add some css, like a popup with some css, the problem is that those jquery functions works with the ID of the image but every image has a differente ID. How can I do to make it work?

popup = {
  init: function() {
    $('figure').click(function() {
      popup.open($(this));
    });

    $(document).on('click', '.popup img', function() {
      return false;
    }).on('click', '.popup', function() {
      popup.close();
    })
  },
  open: function($figure) {
    $('#imagenabierta').css('clip-path', 'none');
    $('#imagenabierta').css('height', '500px');
    $('#imagenabierta').css('width', '800px');
    $('.gallery').addClass('pop');
    $popup = $('<div class="popup" />').appendTo($('body'));
    $fig = $figure.clone().appendTo($('.popup'));
    $bg = $('<div class="bg" />').appendTo($('.popup'));
    $close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig);
    $shadow = $('<div class="shadow" />').appendTo($fig);
    src = $('img', $fig).attr('src');
    $shadow.css({
      backgroundImage: 'url(' + src + ')'
    });
    $bg.css({
      backgroundImage: 'url(' + src + ')'
    });
    setTimeout(function() {
      $('.popup').addClass('pop');
    }, 10);
  },
  close: function() {
    $('#imagenabierta').css('clip-path', 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)');
    $('#imagenabierta').css('height', '305px');
    $('#imagenabierta').css('width', '382px');
    $('.gallery, .popup').removeClass('pop');
    setTimeout(function() {
      $('.popup').remove()
    }, 100);
  }
}

popup.init()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-wrapper">
  <section class="content">
    <div class="row">
      <div class="gallery">
        <div class="grid--item">
          <figure>
            <img class="img" src="..." alt="Imagen" height="500px" width="800px" id="imagenabierta1">
            <figcaption>comentario 1<small>$fecha1</small></figcaption>
            <div class="container">
              <h2>$titulo1</h2>
              <div class="desc">$creador 1</div>
            </div>
          </figure>
        </div>
        <div class="grid--item">
          <figure>
            <img class="img" src="..." alt="Imagen" height="500px" width="800px" id="imagenabierta2">
            <figcaption>comentario 2<small>$fecha2</small></figcaption>
            <div class="container">
              <h2>$titulo2</h2>
              <div class="desc">$creador 2</div>
            </div>
          </figure>
        </div>
        <div class="grid--item">
          <figure>
            <img class="img" src="..." alt="Imagen" height="500px" width="800px" id="imagenabierta3">
            <figcaption>comentario 3<small>$fecha3</small></figcaption>
            <div class="container">
              <h2>$titulo3</h2>
              <div class="desc">$creador 3</div>
            </div>
          </figure>
        </div>
      </div>
    </div>
  </section>
</div>