JQuery Popup работает только для одного элемента

Question

У меня есть таблица как минимум с 10 записями из базы данных mysql.В каждом ряду есть кнопка.При нажатии на кнопку появляется всплывающее окно с текстовым полем.Идея состоит в том, чтобы ввести ставку для этого элемента во всплывающем окне.

Скрипт работает, но только для первого элемента, а не для остальных.Как я могу сделать это динамически?

Вот код:

$(document).ready(function(){
	$("#show").click(function() {
	  $("#popup").show();
	});

	$("#close, #submit").click(function() {
	  $("#popup").hide();
	});
});

#popup {
  position: relative;
  z-index: 100;
  padding: 10px;
}

.content {
  position: absolute;
  z-index: 10;
  background: #ccc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 5;
  opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" style="display: none;">
    <div class="overlay"></div>
    <div class="content">
      <header>
        <div id="close">✖</div>
      </header>
      <form name="form1" method="post" action="bid.php">
        <fieldset>
          <label for="bid">Bid</label>
		  <input type="text" name="bids[]" id="bids[]" size="8"/>
          <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
		<footer>
			<button type="button" id="submit">Bid Now</button>
      </footer>
      </form>
    </div>
  </div>

 /*This is how I trigger the popup. It is an example for one item but all the rest have the same composition*/

<td><button id="show"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>

Answer 1

Я просто дал каждой кнопке уникальный идентификатор, и он работал, затем использовал селектор jquery для каждого идентификатора. Пример:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" style="display: none;">
    <div class="overlay"></div>
    <div class="content">
      <header>
        <div id="close">✖</div>
      </header>
      <form name="form1" method="post" action="bid.php">
        <fieldset>
          <label for="bid">Bid</label>
          <input type="text" name="bids[]" id="bids[]" size="8"/>
          <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
        <footer>
            <button type="button" id="submit">Bid Now</button>
      </footer>
      </form>
    </div>
  </div>

<td><button id="show"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
<td><button id="show1"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
<td><button id="show2"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>

JS:

$(document).ready(function(){
    $("#show, #show1, #show2").click(function() {
      $("#popup").show();
    });

    $("#close, #submit").click(function() {
      $("#popup").hide();
    });
});

Answer 2

Id необходимо уникально для каждого элемента, и это проблема в вашем коде.Преобразуйте id в class следующим образом: -

$(document).ready(function(){
    $(".show").click(function() {
      $("#popup").show();
    });

    $("#close, #submit").click(function() {
      $("#popup").hide();
    });
});

И код кнопки, например: -

<td><button class="show"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>

Рабочий фрагмент: - https://jsfiddle.net/3u2jL2rh/