Chrome Extension Popup Dom Changes not updating

I've build a chrome extension that simply displays some HTML in the Popup. I use the foundation framework to display tables and jQuery to manipulate the DOM

Both JQuery and Foundation are downloaded to the extension and included in the HTML.

When I try to update the tables while the popup is already open, I don't see the changes in the Popup changing (e.g $('p').text("new text") ) - but in the Elements section of the Chrome Dev tools the text was changes.

Also my CSS hover effect on the table rows only display on the upper two of the three tables.

Is this something that is normal? I don't have these issues when I view the popup.html in a separate tab.

How often does the DOM get updated? How can I control when it does?

Here is my popup.html:

<script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../js/what-input.js"></script>
<script type="text/javascript" src="../../js/foundation.min.js"></script>

<link href="../../css/foundation.min.css" rel="stylesheet">

<table class="hover unstriped">
        <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
        </thead>
        <tbody>
                <tr>
                        <td>1</td>
                        <td>Content</td>
                        <td>Content Goes Here</td>
                        <td>Content Goes Here</td>
                    </tr>
        </tbody>
    </table>

<table class="hover unstriped">
        <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Content</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        </tbody>
    </table>

<table class="hover unstriped">
        <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
        </thead>
        <tbody>
                <tr>
                        <td>1</td>
                        <td>Content</td>
                        <td>Content Goes Here</td>
                        <td>Content Goes Here</td>
                    </tr>
        </tr>
        </tbody>
    </table>

    <p id="test">new message</p>

EDIT Screencast: http://youtu.be/7xMwisRWHJE You can see 1. The hover effect only works on the first two tables and 2. the jQuery command changes the node in the Elements panel, but not in the popup itself

manifest.json

    {
      "name": "CHANGE THIS : Extension boilerplate",
      "version": "0.0.1",
      "manifest_version": 2,
      "description": "This extension was created with the awesome extensionizr.com",
      "homepage_url": "http://extensionizr.com",
      "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
      },
      "browser_action": {
        "default_title": "browser action demo",
        "default_popup": "src/browser_action/popup.html"
      },
      "default_locale": "en",
      "permissions": [
        "https://*/*"
      ]
    }