Как скрыть строку заголовка таблицы, если нет дочерних строк, но снова показать строку заголовка, если нажата кнопка

У меня есть таблица с существующими заданиями и кнопка для добавления новых строк в эту таблицу, если пользователь хочет добавить другое задание. Когда пользователь впервые нажимает кнопку «Добавить новую», над первой строкой появляется заголовок. Существует также возможность удаления строк, и здесь возникает моя проблема.

Я хочу, чтобы строка заголовка исчезла, если пользователь удалит все добавленные строки, но проблема заключается в том, чтобы строка заголовка снова отображалась, когда пользователь снова нажимает кнопку «Добавить новую».

Я попытался установить для отображения значение none, что сработало нормально, но когда пользователь снова начинает добавлять строки, заголовок не появляется. Настройка видимости на скрытые тоже работает, но тогда вы видите пустое место там, где должен быть заголовок. Я также попытался добавить оператор if туда, где строка заголовка отображается в первый раз (установив для него значение table-row, если для него установлено значение none), но тогда «Добавить новый» вообще не работал.

Я не могу использовать jQuery, потому что страница использует MooTools, и они конфликтуют. Я очень новичок в MooTools и довольно новичок в JavaScript, поэтому, если кто-то может указать мне правильное направление, я был бы очень признателен.

$(document.body).addEvent('click:relay(.delete-row)', function (e, el) {
                try {
                    e.preventDefault();
                    .
                    .
                    .
                            if (document.getElementById('addNewJobHeader').style.display !== 'none' && el.get('data-row-id') === '1') {
                                document.getElementById('addNewJobHeader').setStyle('display', 'none');
                            }
                            rewriteeditingselections();
                        } else {
                            .
                            .
                            .
                        }
                    }
                } catch (e) {
                    .
                    .
                    .
                }
            });

            function showHeaderRow() {
                showHeaderRow = function() {};
                Elements.from(connectjobheadertemplate({})).inject($('linkedJobsBody'));
            }

            function addChildJobRow() {
                try {
                    lastrow++;
                    let cl = (lastrow % 2 ? 'odd' : 'even');
                    showHeaderRow();
                    var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        ref: refNum,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('linkedJobsBody'));
                } catch (e) {
                    .
                    .
                    .
                }
            }

Обновлено: Добавление HTML:

Таблица существующих вакансий:

        <form method = "post" id = "linkedJobsForm" action = "###" name = "linkedJobsForm">
            <table width = "100%">
                <thead>
                <tr class = "odd">
                    <th align = "center">Chk</th>
                    <th>Ref #</th>
                    <th>Pages</th>
                    <th>Order Date</th>
                    <th>NYSID</th>
                    <th>DIN#</th>
                    <th>Warrant Number</th>
                </tr>
                </thead>
                <tbody id = "linkedJobsBody">
                                            <tr id = "connectjobrow0" class = "tc ec" data-row-id = "0" data-connected-job = "44752">
                            <td width = "50" align = "center">
                                <input type = "checkbox" name = "copyid[]" value = "44752"  />
                            </td>
                            <td>
                                <a href = "###" id = "jobReference[0]" name = "connectedjob[0][jobReference]"title = "###">###</a>                                </td>
                            <td>
                                <input style = "background-color: transparent; border: none;" type = "text"
                                    data-row-id = "0" id = "pages[0]"
                                    name = "connectedjob[0][pages]" onkeyup = "setPages(this.value, this.id)"
                                    value = "53" class = "pages" size = "3"/>
                            </td>
                            <td>
                                <input style = "background-color: transparent; border: none;" type = "text"
                                    data-row-id = "0" id = "date[0]"
                                       name = "connectedjob[0][orderDate]" onblur = "reformatDate(this.value, this.id)"
                                       value = "Dec 16, 2015" class = "datefield orderDate" size = "10">
                            </td>
                            <td>
                                <input style = "background-color: transparent; border: none;" type = "text"
                                    data-row-id = "0" id = "pages[0]"
                                    name = "connectedjob[0][nysid]" class = "nysid" onkeyup = "setNYSId(this.value, this.id)"
                                       data-row-id = "0" id = "nysid[0]"
                                       name = "connectedjob[0][nysid]" class = "nysid"
                                    value = "11991495H">
                            </td>
                            <td>
                                <input style = "background-color: transparent; border: none;" type = "text"
                                    data-row-id = "0" id = "pages[0]"
                                    name = "connectedjob[0][dinNum]" class = "dinNum" onkeyup = "setDinNum(this.value, this.id)"
                                       data-row-id = "0" id = "dinNum[0]"
                                       name = "connectedjob[0][dinNum]" class = "dinNum"
                                    value = "13R2708">
                            </td>
                            <td>
                                <input style = "background-color: transparent; border: none;" type = "text" onkeyup = "setWarrantNum(this.value, this.id)"
                                    data-row-id = "0" id = "pages[0]"
                                    name = "connectedjob[0][warrantNum]" class = "warrantNum"
                                    value = "0739791">
                            </td>
                        </tr>
                   </tbody>
            </table>

Кнопки:

            <div style = "float: right;"><button id = "add-new-row" style = "text-align:center;margin-top:5px;width:85px;" class = "boxbutton">Add New</button>&nbsp;<button style = "text-align:center;margin-top: 5px; width: 60px;" id = "save" class = "boxbutton">Save</button></div><br>            </form>

Шаблоны:

        <script id = "connectjobheadertemplate" type = "text/plain">
            <table>
                <tr class = "odd even" id = "addNewJobHeader" style = "display:table-row;">
                    <td colspan = "7">
                        <table width = "100%" style = "border:0px;border-style:hidden;">
                            <thead>
                                <tr>
                                    <th style = "width: 15%;">Name</th>
                                    <th style = "width: 15%;">Ref #</th>
                                    <th style = "width: 5%;">Pages</th>
                                    <th style = "width: 15%;">Order Date</th>
                                    <th style = "width: 15%;">NYSID</th>
                                    <th style = "width: 15%;">DIN#</th>
                                    <th style = "width: 15%;">Warrant Number</th>
                                    <th style = "width: 4%;"></th>
                                </tr>
                            </thead>
                        </table>
                    </td>
                </tr>
            </table>
        </script>
        <script id = "connectedjobtemplate" type = "text/template">
            <tr id = "childjobrow1" class = "odd" data-row-id = "1">
                <td colspan = "7">
                    <table width = "100%" style = "border:0px;border-style:hidden;">
                        <tr>
                            <td style = "width: 15%;">
                                <input class = "childjobid" type = "hidden" id = "childjobid1" name = "childjobid[1][transcribername]" value = "0" />
                                <input type = "hidden" id = "transcriberid[1]" name = "childjobid[1][transcriberid]" value = "" />
                                <input data-row-id = "1" id = "assignee[1]" name = "childjobid[1][transcribername]" class = "" list = "transcribers" autocomplete = "off" value = "" placeholder = "Name" size = "14" />
                            </td>
                            <td style = "width: 15%;">
                                <input data-row-id = "1" id = "reference[1]" name = "childjobid[1][reference]" value = "" class = "ref" size = "14" style = "background-color: transparent; border: none;" />
                            </td>
                            <td style = "width: 5%;">
                                <input data-row-id = "1" id = "pages[1]" name = "childjobid[1][pages]" value = "" class = "" style = "" size = "1"/>
                            </td>
                            <td style = "width: 15%;">
                                <input data-row-id = "1" id = "orderDate[1]" name = "childjobid[1][orderDate]" value = "" class = "" type = "date" size = "14" />
                            </td>
                            <td style = "width: 15%;">
                                <input data-row-id = "1" id = "nysid[1]" name = "childjobid[1][nysid]" value = "" class = "" size = "14" />
                            </td>
                            <td style = "width: 15%;">
                                <input data-row-id = "1" id = "dinNum[1]" name = "childjobid[1][dinNum]" value = "" class = "" size = "14" />
                            </td>
                            <td style = "width: 15%;">
                                <input data-row-id = "1" id = "warrantNum[1]" name = "childjobid[1][warrantNum]" value = "" class = "" size = "14" />
                            </td>
                            <td style = "width: 5%;align:center;">
                                <button data-row-id = "1" id = "0" class = "delete-row" style = "text-align:center;margin-top: 5px;width:30px;color: #fff;background-color: #b9534f !important;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-style: none;">X</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </script>