title: Using button to reset value in a table
body: <p>I'm trying to get a button to reset one of the values in my table, however it's not working. Here is the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table class="table table-bordered" id="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Time&lt;/th&gt;
        &lt;th&gt;Header&lt;/th&gt;
        &lt;th&gt;Header&lt;/th&gt;
        &lt;th&gt;Header&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td id="time" data-default="00:00"&gt;48:25&lt;/td&gt;
        &lt;td&gt;Data&lt;/td&gt;
        &lt;td&gt;Data&lt;/td&gt;
        &lt;td&gt;Data&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button type="button" class="btn btn-block btn-danger" id="reset"&gt;Reset&lt;/button&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>  $(document).ready(function() {
          $("#reset").on("click", function() {
            $('#table').find('#time').each(function() {
              $(this).val($(this).attr("data-default"));
            });
          });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/sinesine/hjo2a2ot/2/" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <p>Any help would be greatly appreciated.</p>