title: jquery duplicating dynamically created content
body: <p>im building a phone app using html5, jquery and php and database. I have a messaging system im trying to develope and have an issue with jquery dynamically creating buttons. I have code that creates a message subject div and message content div using details from the database called using ajax and json, I have then created a delete message button that should get the messageid that will allow the user to delete message from the database once read. The present issue is in dynamic creation of the delete button jquery is duplicating the button, so i need to get jquery to just create the button with the id of the message only, then use a jquery ajax function to delete the message. Following is my code and you can view the live process here <a href="http://newberylodge.co.uk/webapp/message.html" rel="nofollow">http://newberylodge.co.uk/webapp/message.html</a></p>
  
  <p><strong>page code</strong></p>
  
  <pre><code>&lt;link href="styles/pages.css" rel="stylesheet" type="text/css"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {//READY FUNC   
  
          $.getJSON("http://newberylodge.co.uk/webapp/includes/messageRetrieve.php",function(data)  {//JSON
  
             $.each(data, function(key, val) {//iterate each data
                 var id = val.id;
                 var messageId = val.messageId;
                 var messageSubject = val.messageSubject;
                 var messageContent = val.messageDetail;
  
               $('#serverData').append('&lt;div id="' + id + '" class="messageAlert"&gt;' + messageSubject + '&lt;/div&gt;');
               $('#serverData').append('&lt;div id="' + messageId + '" class="messageContent"&gt;' + messageContent + '&lt;/div&gt;');
               $('.messageContent').append('&lt;input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" /&gt;');
  
                          });//iterate each data
  
              });//JSON       
  
  });//READY FUNC
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body class="body"&gt;
  
    &lt;div class="top"&gt;
      &lt;div class="logoSmall"&gt;&lt;/div&gt;
      &lt;a href="menu.html"&gt;&lt;div class="menuIcon"&gt;&lt;/div&gt;&lt;/a&gt; 
  
  &lt;/div&gt;
    &lt;div class="pageBan3"&gt;&lt;/div&gt;
    &lt;div id="whiteBox" class="whiteBox"&gt;
      &lt;div id="serverData"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;div class="l-a"&gt;&lt;/div&gt;
  &lt;div class="tagLine1"&gt;Little minds with big ideas&lt;/div&gt;  
  
  
  &lt;script&gt;
               $(document).ready(function() {
      $("#serverData").on("click", ".messageAlert", function() {
          $(this).next(".messageContent").toggle();
      });
  
          $("#serverData").on("click", ".messageContent", function() {
          $(this).before().toggle();
      });
               })
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>json code for dynamic creation</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {//READY FUNC   
  
          $.getJSON("http://newberylodge.co.uk/webapp/includes/messageRetrieve.php",function(data)  {//JSON
  
             $.each(data, function(key, val) {//iterate each data
                 var id = val.id;
                 var messageId = val.messageId;
                 var messageSubject = val.messageSubject;
                 var messageContent = val.messageDetail;
  
               $('#serverData').append('&lt;div id="' + id + '" class="messageAlert"&gt;' + messageSubject + '&lt;/div&gt;');
               $('#serverData').append('&lt;div id="' + messageId + '" class="messageContent"&gt;' + messageContent + '&lt;/div&gt;');
               $('.messageContent').append('&lt;input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" /&gt;');
  
                          });//iterate each data
  
              });//JSON       
  
  });//READY FUNC
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be greatfully appreciated</p>