I was looking through previous forum posts about this topic but couldn't find anything that really helped me, so here we go. I'm brand new to programming, and especially new to jQuery mobile.

Upon the click of a button, I open a popup that contains a form. I type in a word, click submit, and it appends this word to a list displayed on the same page. The problem is this... I add TWO separate words (two different submits), and then the page refreshes and the words are gone (haven't gotten to storing these words yet) but the refresh is an issue, and then I can no longer click the button to trigger the popup, nothing happens upon click. I have to restart the application for it to work again. This happens after the second word input every time, without fail. 

I'm using the basic skeleton from the code here, under the "Form" section: http://demos.jquerymobile.com/1.4.3/popup/

And here's MY code... 

2. <div data-role="collapsible">
3. <h3>Words</h3>
4. <a href="#popupWord"  data-rel="popup" data-position-to="window"  data-transition="pop" id="link-words">
5. <button id="goto-words" data-icon="edit">Add a Word...</button></a>
6. <div data-role="popup" id="popupWord" class="ui-corner-all" data-overlay-theme="a">
7.     <form>
8.         <div style="padding:10px 20px;">
9.             <h3>Add a Word...</h3>
10.             <input type="text" name="enter-word" id="new-word" value="" placeholder="Enter a Word...">
11.             <button type="submit" id="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Add!</button>
12.         </div>
13.     </form>
14. </div>
15. <ul id="words" data-filter="true">
18. </ul>
19. </div>

If you need anymore information, let me know. Thank you in advance!