title: Buttons dynamically added to table are not working Jquery
body: <p>I have a table that I've created dynamically and in each row there is a button that will clear that row. The button works fine in the first row, but doesn't do anything in the following rows. To troubleshoot this, I set the button to give me an alert on click, but only the first button is registering.</p>
  
  <p>I've changed the button to be an ID and a Class, but that doesn't seem to do anything either.</p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> //dynamically create 4 rows
   $(document).ready(function(){
   var rowsAdd = $('#addTable tbody &gt;tr');
   var rA = rowsAdd.length;
   while (rA&lt;5) {
    $('#addTable tbody&gt;tr:last').clone().insertAfter('#addTable tbody&gt;tr:last');
    rA++;
   }
  })
  
   //alert on button click
   $('.clear').each(function(index){
    $(this).on("click",function(){
    alert("Button " +index+ " is clicked");
   });
   });
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table id="addTable"&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;th style="width: 10%"&gt;Class #&lt;/th&gt;
              &lt;th style="width: 30%;"&gt;Course Title&lt;/th&gt;
              &lt;th style="width: 20%;"&gt;Catalog Number&lt;/th&gt;
  
     &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
     
     &lt;div class="addTable"&gt;
            &lt;tr&gt;
     &lt;td class="classNumID"&gt;&lt;/td&gt;
     &lt;td&gt;
     &lt;input list="courses" name="courseInput" placeholder="Course" class="courseClass" oninput="UpdateCatNumbers()"&gt;
        &lt;datalist id="courses" name="courseDatalist"&gt;
       &lt;!--Filled in script--&gt;     
        &lt;/datalist&gt;
     &lt;/td&gt;
            &lt;td&gt;
      &lt;input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" class="catClass" oninput="UpdateCourseNames()"&gt;
        &lt;datalist id="catalogs" name="catalogDatalist"&gt;
       &lt;!--Filled in script--&gt;
        &lt;/datalist&gt;
        &lt;/td&gt;
     &lt;td&gt;&lt;button class="clear"&gt;−&lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
      &lt;/div&gt;    </code></pre>
  </div>
  </div>
  </p>