How to make each button clickable?

Question

So I'm looping through a JSON object and rendering the data in the View. Each object also has a button that I created. When I call the idea of that button to do some action only the first button works. Here is html code:

<div class="row text-center" style="display:flex; flex-wrap: wrap;">
    <% data["Search"].forEach((movie) => { %>
      <div class="col-md-3 col-sm-6">
        <div  class="thumbnail">
          <div class="caption">
            <li><%= movie["Title"] %></li>
            <li><%= movie["Year"] %></li>
            <li id="id"><%= movie["imdbID"]%></li>
          </div>
          <img  src="<%= movie["Poster"] %>" alt="">
          <button id="clickable"  type="button" name="button">Get More details About The Movie</button>
        </div>
      </div>
    <% }) %>
</div>
</div>

As you can the button has id="clickable". Here is the code for jQuery:

<script  type="text/javascript">
$(document).ready(function(){
//alert(this).data("#hello");
$( "#clickable" ).click(function() {
  var item = $("#id").text();
  alert('Selected Name = ' + item );
});
});

For now I'm just displaying id="id" data. Assume that looping through 10 different movies but only the first one works when I click id="clickable".

Thanks.

All your buttons have the same id. And in each one, one of the id all have the same id `id` — Taplar, Feb 27 '18 at 23:59
Oh Okay, I got it. Since I'm looping through it how can I make a unique id for each
Again, use a class and contextual lookups. http://learn.jquery.com/using-jquery-core/selecting-elements/ — Taplar, Feb 28 '18 at 00:01
Okay, I kinda got it. Do you mind explaining how contextual lookups work with classes? @Taplar — Rocky Singh, Feb 28 '18 at 00:05

score -1 · Accepted Answer · answered Feb 28 '18 at 00:07

Here is your markup.

<div class="col-md-3 col-sm-6">
    <div  class="thumbnail">
      <div class="caption">
        <li><%= movie["Title"] %></li>
        <li><%= movie["Year"] %></li>
        <li id="id"><%= movie["imdbID"]%></li>
      </div>
      <img  src="<%= movie["Poster"] %>" alt="">
      <button id="clickable"  type="button" name="button">Get More details About The Movie</button>
    </div>
  </div>

The issue is you have duplicate ids, clickable and id. These both need to be classes as repeating ids in the DOM is invalid markup.

<div class="col-md-3 col-sm-6">
    <div  class="thumbnail">
      <div class="caption">
        <li><%= movie["Title"] %></li>
        <li><%= movie["Year"] %></li>
        <li class="id"><%= movie["imdbID"]%></li>
      </div>
      <img  src="<%= movie["Poster"] %>" alt="">
      <button class="clickable"  type="button" name="button">Get More details About The Movie</button>
    </div>
  </div>

Now we just need to modify the binding and id lookup to use the classes.

$(document).ready(function(){
    //bind on the class
    $( ".clickable" ).click(function() {
        //the relation of clickable to id is, they are both children of the thumbnail.
        //so we can go up from the clickable we clicked to it's parent
        //thumbnail, and then find the nested id
        var item = $(this).closest('.thumbnail').find(".id").text();
    });
});

Thank you so much, bro. I've been stuck there all day. Just got it. — Rocky Singh, Feb 28 '18 at 00:11

How to make each button clickable?

1 Answers1