data-footer="none" not hiding footer

[GemmaLouise]

Following this: https://software.intel.com/en-us/xdk/article/customize-headers-and-footers-with-app-framework

I only want to show one footer for one panel so I called it using data-footer on the panel div and specified the ID of the footer.

For every other I've set data-footer="none" yet the footer still shows globally across every panel.

`

    <div class="pages">

        <!-- Login -->
        <div class="panel gradient-bg" data-title="Login" id="signin" data-include="partials/login.html" data-footer="none" selected="true"></div>

        <!-- Register -->
        <div class="panel" data-title="Register" id="signup" data-include="partials/register.html" data-footer="none"></div> 

        <!-- Home -->
        <div class="panel no-pad" data-title="Home" data-header="none" id="main" data-include="partials/home.html" data-footer="none"></div>

        <!-- Delivery Notes -->
        <div class="panel" data-title="Delivery Notes (2)" id="delivery-notes" data-include="partials/delivery-notes.html" data-footer="delivery-note-footer"></div>

    </div>

    <footer id="delivery-note-footer">
        <a href="#" class="backButton back button">Done</a>
    </footer>`

`

Any help is appreciated.