Selecting divs with jQuery with the same class name

Question

I'm trying to mimic something like a social media profile page.

I've got an HTML page which utilizes a loop to displays random messages from 4 different users. 10 "tweet" divs are displayed on the page and are basically the same except their class names and their contents.

Here's an example:

<div class="tweet">
  <div id="unique" class="mary">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>
<div class="tweet">
  <div id="unique" class="john">
    <strong>@john:</strong>
  </div>"I just ate an amazing pizza."
</div>

Each of these divs has an ID and a class names: the ID is same for all and is static, the class name is dynamical and randomly assigned 1 of 4 names: john, mary, david, susan.

Once the page loads I want to be able to click one of the usernames in these divs and have it display only the messages from that particular individual.

Here's the jQuery code I'm using:

var grabTweets = function(){
  showTweets('', 'all');
  $('#unique').on('click', function() {
    var tweetUser = $('#unique').attr('class');
    showTweets(tweetUser, 'user');
  });      
}

showTweets is a function that concats a random user with a random message and appends it to the parent div.

As the code is, it only works for the first div on the page, instead of for all of divs. I want it to work for all the username divs on the page.

Answer 1

ID are unique, therefor they should only appear once. You could bypass this, by using data-attributes.

For example

<div class="tweet">
  <div data-sharedName="unique" class="mike">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>
<div class="tweet">
  <div data-sharedName="unique" class="mike">
    <strong>@john:</strong>
  </div>"I just ate an amazing pizza."
</div>

Then your javascript has to be

$('[data-sharedName]').on('click', function() {
  var tweetUser = $(this).attr('class');
  showTweets(tweetUser, 'user');
}); 

Answer 2

Generate the following html instead:

<div class="tweet">
  <div id="unique-1" class="mike">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>
<div class="tweet">
  <div id="unique-2" class="mike">
    <strong>@john:</strong>
  </div>"I just ate an amazing pizza."
</div>

Now you can use the class "tweet" to find all the containers:

  $('.tweet').on('click', function() {
    /* here some code to find the child of the container */
    /* Use $(this) to reference the current container */
  });

As mentioned in the comments, when you are in the event handler, you can use $(this) to reference the element that has been clicked.

A complete implementation: full example

Answer 3

You should never have the same id for two or more different elements. That's what classes are for. Everything which uses idS, assume you follow this rule.

you can use data attributes

<div class="tweet">
  <div data-uid="mike" class="tweet">
    <strong>@mary:</strong>
  </div>"the sun is shining today."
</div>

$('.tweet').on('click', function() {
  var tweetUser = $(this).data('uid');
  showTweets(tweetUser, 'user');
});