How to hide a table and header rows using conditional statements in Javascript

Question

I am working on a custom-picking ticket (advanced PDF) in Netsuite. One of the elements on the ticket is a table that shows any backordered items that were purchased.

But if all of the ordered items are in stock, then the backordered table doesn't appear.

The code shown below works exactly as we need it to (meaning the line items only appear in the table if there is anything on backorder) except that the table directly above the backordered table, which contains the title "Backordered Item(s):" and the header row of the backordered table (with the column labels) appear on the picking ticket regardless of whether there are any backordered items.

I'd like to hide the title and header rows as well if there are no items on backorder.

I'm not very good at Javascript or HTML, and I'm still pretty new at this so any suggestions or help you can provide would be appreciated.

My initial thinking was to put the line items in a Div that a conditional statement could look at to determine if the backordered title and header rows should appear.

But the only way Netsuite would validate the code with the Div included was if I wrapped the div around the entire backordered table (it wouldn't let me wrap it around just the rows within the table).

And when I tried putting <#if backordered?has_content> before the title table, it made the "Backordered Item(s):" title disappear completely, even if there WERE items on backorder (in which case, the title SHOULD be showing).

Does anyone have any suggestions on how to fix this?

Here is the code I'm working with:

<table class="itemtable" style="width:100%; margin-top:20px;">
   <tr>
      <td align="left" style="font-size:13pt;"><strong>BACKORDERED ITEM(S):</strong></td>
   </tr>
</table>
<div id="backordered">
   <table class="itemtable2" style="width: 100%; margin-top: 0px;">
      <thead>
         <tr>
            <th colspan="12">Item</th>
            <!--    <th colspan="3">${record.item[0].options@label}</th> -->
            <th align="right" colspan="4">Ordered</th>
            <th align="right" colspan="4">Shipped</th>
            <th align="right" colspan="4">B/O</th>
            <th align="right" colspan="4">Unit</th>
         </tr>
      </thead>
      <#list record.item as tranline><#if tranline.quantitybackordered?string == '0'>
      <#elseif tranline.itemtype == 'OthCharge'>
      <#elseif tranline.itemtype == 'Markup'>
      <#elseif tranline.itemtype == 'Description'>
      <#elseif tranline.itemtype == 'Service'>
      <#elseif tranline.itemtype == 'GiftCert'>
      <#elseif tranline.itemtype == 'Discount'>
      <#elseif tranline.itemtype == 'Payment'>
      <#elseif tranline.itemtype == 'Subtotal'>
      <!-- If none are backordered or item type is other charge, markup, description, service, gift certificate, subtotal, payment, or discount then print nothing, else print what's below-->
      <#else>
      <tr>
         <td colspan="12"><span class="itemname">${tranline.item}</span><br />${tranline.description}</td>
         <!--    <td colspan="3">${tranline.options}</td> -->
         <td align="right" colspan="4">${tranline.quantity}</td>
         <td align="right" colspan="4">${tranline.quantitycommitted}</td>
         <td align="right" colspan="4">${tranline.quantitybackordered}</td>
         <td align="right" colspan="4">${tranline.custcol5}</td>
      </tr>
      </#if></#list>
   </table>
</div>