Modal window for several products

Question

I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.

window.onload = function() {
  $('.img-for-modal').click(function() {
    $('.modal').css('display', 'block');

  });

  $('.close').click(function() {
    $('.modal').css('display', 'none');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
  <table class="product">
    <tr>
      <td class="img" rowspan="3">
        <img class="img-for-modal" src="media/products-image/1.jpg">
        <div class="modal">
          <span class="close">&times;</span>
          <img class="modal-img" src="media/products-image/1.jpg">
        </div>
      </td>
      <td class="product-info">
        <article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
      </td>
    </tr>
    <tr>
      <td class="product-info">
        <b>Цена: </b>200 руб.
      </td>
    </tr>
    <tr>
      <td class="product-delete">
        <a href="#">Добавить в корзину</a>
      </td>
    </tr>
  </table>

Answer 1

I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal

Note I use jQuery $(function() { ... }); instead of window.onload = function() { ... }

$(function() {
  $('.img-for-modal').click(function() {
    $(this).next(".modal").show();
  });

  $('.close').click(function() {
    $(this).closest(".modal").hide();
  });
});

.modal { display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
  <table class="product">
    <tr>
      <td class="img" rowspan="3">
        <img class="img-for-modal" src="media/products-image/1.jpg">
        <div class="modal">
          <span class="close">&times;</span>
          <img class="modal-img" src="media/products-image/1.jpg">
        </div>
      </td>
      <td class="product-info">
        <article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
      </td>
    </tr>
    <tr>
      <td class="product-info">
        <b>Цена: </b>200 руб.
      </td>
    </tr>
    <tr>
      <td class="product-delete">
        <a href="#">Добавить в корзину</a>
      </td>
    </tr>
  </table>