title: Inserting HTML Table Row "Heading" Based On Dynamic Visible Element Data Attribute
body: <p>Let's say I have a table containing rows which contain a table cell having a data-time attribute and may or may not be visible (ie. display: none). This visibility is dynamic and at any point a row may change.</p>
  
  <p>Only the first of three table cell in these rows contains a data-time attribute.</p>
  
  <p>The table rows are already grouped according to their children's data-time attribute value. My goal is to utilize JS/jQuery to insert a new table row above the <strong>first/unique visible</strong> occurrence of any particular data-time value. This row should contain a table cell which spans the entire width of the table and has text equivalent to the corresponding data-time value.</p>
  
  <p>Example start:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr style="display:none;"&gt;
      &lt;td data-time="7:15 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="8:00 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="8:00 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="8:00 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="9:30 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr style="display:none;"&gt;
      &lt;td data-time="9:30 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>Example goal:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr style="display:none;"&gt;
      &lt;td data-time="7:15 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="3"&gt;8:00 pm&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="8:00 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="8:00 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="8:00 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="3"&gt;9:30 pm&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-time="9:30 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr style="display:none;"&gt;
      &lt;td data-time="9:30 pm"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;table&gt;
  </code></pre>