title: how to get varying modal content
body: <p>Hi I am trying to get the varying modal content but I am not sure where I am going wrong as I am new to JavaScript</p>
  
  <p>My Code:</p>
  
  <pre><code>&lt;a data-toggle="modal" data-target="#exampleModal" data-whatever="sampleText" &gt;testData&lt;/a&gt;
  
  
  
          &lt;div class="modal fade bs-example-modal-sm" tabindex="-1" id="exampleModal"&gt;
              &lt;div class="modal-dialog modal-sm"&gt;
                  &lt;div class="modal-content"&gt;
                       &lt;h4 class="modal-title" id="exampleModalLabel"&gt;New message&lt;/h4&gt;
                       &lt;form&gt;
       &lt;div class="form-group"&gt;
                  &lt;label for="recipient-name" class="control-label"&gt;Recipient:&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="recipient-name"&gt;
                &lt;/div&gt;
                &lt;/form&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;script type="text/javascript"&gt;
          $('#exampleModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('whatever') 
                var modal = $(this)
                modal.find('.modal-title').text('New message to ' + recipient)
                modal.find('.modal-body input').val(recipient)
              })
          &lt;/script&gt;
  </code></pre>
  
  <p>My aim is to display the "sampleText" in the input text box. But I dont get it. I am only getting empty box.
  Also is there a way to display a list of strings in the input box.?? 
  Sorry if my question is very basic.
  S</p>