title: Dynamically changing content of modal on list element click
body: <p>I have a html page that is simulating the newsfeed of a social network website. here, posts from different users are generated as li on an un-ordered list. I want to show a pop up modal on the click even of any of these list elements that would dynamically show the content of that particular list element. the mark up is like below:</p>
  
  <pre><code>&lt;body&gt;  
      &lt;div class="container" &gt;
  
  
          &lt;ul id="newsfeed"&gt;
              &lt;li class="news" data-toggle="modal" data-target="#myModal"&gt;
  
                  &lt;img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60"&gt;
                  &lt;p class="title"&gt;jhon&lt;/p&gt;
                  &lt;p class="text"&gt;good moprning every body&lt;/p&gt;
                  &lt;p&gt;posted at 12:30pm&lt;/p&gt;
  
                  &lt;hr&gt;
  
              &lt;/li&gt;
  
              &lt;li class="news" data-toggle="modal" data-target="#myModal"&gt;
  
                  &lt;img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60"&gt;
                  &lt;p class="title"&gt;jimmy&lt;/p&gt;
                  &lt;p class="text"&gt;hello every body&lt;/p&gt;
                  &lt;p&gt;posted at 12:30pm&lt;/p&gt;
  
                  &lt;hr&gt;
  
              &lt;/li&gt;
  
              &lt;li class="news" data-toggle="modal" data-target="#myModal"&gt;
  
                  &lt;img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60"&gt;
                  &lt;p class="title"&gt;joe&lt;/p&gt;
                  &lt;p class="text"&gt;felling bored at home&lt;/p&gt;
                  &lt;p&gt;posted at 12:30pm&lt;/p&gt;
  
                  &lt;hr&gt;
  
              &lt;/li&gt;
  
          &lt;/ul&gt;
  
  
          &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body" id="popup"&gt;
                      &lt;p&gt;Some text in the modal.&lt;/p&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;/body&gt;
  </code></pre>
  
  <p>The JQuery i have tried:</p>
  
  <pre><code>&lt;script&gt;
      $('#myModal').on('show.bs.modal', function (event) {
          var element = $(event.relatedTarget); // the li that triggered the modal to show
          var dynamic_text = element.find('.text').val(); // Extract the value of the .text div inside that li
          var modal = $(this);
          $("#popup").html('the users post says: ' + dynamic_text);
      });
      &lt;/script&gt;
  </code></pre>