title: Removing text within an element that is after the first <br>, but before the second <br> on each relevant row
body: <p>I have text in a table cell that has 3 text blocks separated by <code>&lt;br&gt;</code>. I need to keep the first of these for each time the same row appears in a table.</p>
  
  <p>/* JQuery loop */</p>
  
  <pre><code>$('.invoiceTable &gt; tbody  &gt; tr').each(function() {
  title = $("tr.invoiceTableCatalog td").html().split("&lt;br&gt;")[0];
  $("tr.invoiceTableCatalog td:first").replaceWith( '&lt;td&gt;'+title+'&lt;/td&gt;' );
  });
  </code></pre>
  
  <p>/* Javascript loop */</p>
  
  <pre><code>[].forEach.call(document.querySelectorAll('.invoiceTable &gt; tbody  &gt; tr'), function(tr) {
  
  title = $(".invoiceTableCatalog td").html().split("&lt;br&gt;")[0];
  $(".invoiceTableCatalog td:first").replaceWith( '&lt;td&gt;'+title+'&lt;/td&gt;' );
  
  });
  </code></pre>
  
  <p>However The first row for the occurrence changes, not the other rows. </p>
  
  <p>Here is the HTML for the row:</p>
  
  <pre><code>&lt;tr class="invoiceTableDetail invoiceTableCatalog"&gt;
  &lt;td class="invoiceTableItem" style="width:40%;" valign="top"&gt;
  Multibooking discount
  &lt;br&gt;This is a multibooking discount for being kind enough to buy lots of courses with us - thanks
  &lt;br&gt;(based on -20 Percent of Total Price)
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I'd have expected that each row would have the content replaced, but no, it is not ;-(</p>
  
  <p>Thanks in advance for any assistance.</p>