title: use same class for data target modal in same page
body: <p>im have a profile list page. inside the page it have modal with data-target .popupmessage. the problem is i will using the same class as much as the profile i have. how to make specific when client press the modal? because when i  click the button modal to show the modal, all the modal got show up</p>
  
  <pre><code>&lt;div class="col-xs-3"&gt;
    &lt;div class="profile thumbnail"&gt;
      &lt;img src="http://placehold.it/450x150"&gt;
  
      &lt;button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage"&gt;
        Message
      &lt;/button&gt;
      &lt;div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span class="fa fa-times" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
  
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-xs-3"&gt;
    &lt;div class="profile thumbnail"&gt;
      &lt;img src="http://placehold.it/450x150"&gt;
  
      &lt;button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage"&gt;
        Message
      &lt;/button&gt;
      &lt;div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span class="fa fa-times" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
  
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>heres the example
  <a href="http://www.bootply.com/95vPZK1rN8" rel="nofollow">http://www.bootply.com/95vPZK1rN8</a> </p>
  
  <p>i want to add a number at the end of .popUpMessage
  so like a looping every .popUpMessage will be like this .popUpMessage1, .popUpMessage2, .popUpMessage3, .popUpMessage. but i kindly stuck.
  heres the script</p>
  
  <pre><code>var start=1;
    var max=9999;
  
    for(start;start&lt;=max;start++){
    //i stuck on the condition
  }
  </code></pre>