title: Creating Interactive Table - HTML, CSS, JavaScript
body: <p>My goal is to have my table interactive, and all code within one doc.  I don't want to reference JavaScript or CSS outside of the main document, and this may be where my issue is coming from.</p>
  
  <p>It seems like JavaScript isn't working when the buttons are clicked, and I'm not sure what's going on.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/&gt;
  
      &lt;script&gt;
  
        $(function(){
          var TABLE = $("table");
  
          $(".table-add").click(function() {
            console.log('adding');
  
            var clone = TABLE
              .find("tr.hide")
              .clone(true)
              .removeClass("hide table-line");
  
            TABLE.append(clone);
          });
  
          $(".table-remove").click(function() {
            $(this)
              .parents("tr")
              .detach();
          });
  
          $(".table-up").click(function() {
            var $row = $(this).parents("tr");
            if ($row.index() === 1) return;
            $row.prev().before($row.get(0));
          });
  
          $(".table-down").click(function() {
            var $row = $(this).parents("tr");
            $row.next().after($row.get(0));
          });
        })
      &lt;/script&gt;
  
         &lt;style&gt;
              @import "compass/css3";
  
                  .table-editable {
                    position: relative;
  
                    .glyphicon {
                      font-size: 20px;
                    }
                  }
  
                  .table-remove {
                    color: #700;
                    cursor: pointer;
  
                  }
  
                  .table-up, .table-down {
                    color: #007;
                    cursor: pointer;
  
                  }
  
                  .table-add {
                    color: #070;
                    cursor: pointer;
                    position: absolute;
                    top: 8px;
                    right: 0;
                  }
            &lt;/style&gt;
  
  
    &lt;body&gt;
      &lt;div class="container"&gt;
      &lt;h1&gt;HTML5 Editable Table&lt;/h1&gt;
  
  
      &lt;div id="table" class="table-editable"&gt;
        &lt;span class="table-add glyphicon glyphicon-plus"&gt;&lt;/span&gt;
        &lt;table class="table"&gt;
          &lt;tr&gt;
            &lt;th&gt;Outcomes&lt;/th&gt;
            &lt;th&gt;Implementation/Sensors&lt;/th&gt;
            &lt;th&gt;Alert Type&lt;/th&gt;
            &lt;th&gt;Responder/Contact Info&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td contenteditable="true"&gt;Outcome&lt;/td&gt;
            &lt;td contenteditable="true"&gt;Sensor&lt;/td&gt;
            &lt;td contenteditable="true"&gt;Alert&lt;/td&gt;
            &lt;td contenteditable="true"&gt;Contact&lt;/td&gt;
            &lt;td&gt;
              &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
              &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;!-- This is our clonable table line --&gt;
          &lt;tr class="hide"&gt;
            &lt;td contenteditable="true"&gt;Outcome&lt;/td&gt;
            &lt;td contenteditable="true"&gt;Sensor&lt;/td&gt;
            &lt;td contenteditable="true"&gt;Alert&lt;/td&gt;
            &lt;td contenteditable="true"&gt;Contact&lt;/td&gt;
            &lt;td&gt;
              &lt;span class="table-remove glyphicon glyphicon-remove"&gt;&lt;/span&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;span class="table-up glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
              &lt;span class="table-down glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/body&gt;
  </code></pre>