title: Button click only works on one button out of appended list of buttons
body: <p>JQUERY
  i have 4 buttons that are pulled  from a database and appended to  a list, but only this first appended button works. All the rest wont do anything.</p>
  
  <pre><code>function getaplist(){
   $.getJSON('/geticsassignments',
   function(data){
   console.log(data)
   for (var i = 0; i &lt; data.length; i++){
    var assign = ("&lt;tr&gt;&lt;th&gt;&lt;button class='btn btn-warning' id='getaptext' 
    value=''&gt;"+ data[i].aparatus +"&lt;/button&gt;&lt;/th&gt;&lt;/tr&gt;")
   $('#aptbody').append(assign)
  }
  
  $('#getaptext').on('click', function(){
   $("#getaptext").removeClass("btn btn-warning").addClass("btn btn-danger")
   var aparatus = $(this).text()
   alert(aparatus)
   $.getJSON('/sendap',{
   }, function(data){
    console.log(data)
   })
  })
  })
  }
  getaplist()
  
  &lt;div id='aplist'&gt;
   &lt;table class="table"&gt;
      &lt;thead&gt;
         &lt;tr&gt;
            &lt;th&gt;&lt;p style="text-align: center;"&gt;Aparatus&lt;/p&gt;&lt;/th&gt;
         &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id='aptbody'&gt;
      &lt;/tbody&gt;
   &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>