Value jumps between textboxes on refresh

I have a page with 6 textboxes, if I enter values in those text boxes and then refresh the page - the values jump to the next text box (actually to the 2nd next text box).

So if I have entered values as following

[1] [2] [3] [4] [5] [6]

after refresh it becomes:

[0] [0] [1] [2] [3] [4]

on next refresh values get shifted by two text boxes again.

text boxes are created with:

<input type='text' id='foo' class='bar' value='0'/>

I think it is important that I use flexbox jQuery plugin wh开发者_如何学Cich replaces given element with two new input elements. Removing flexbox does solve the issue.

You can try it out here enter some values in the "stat weights" row at the bottom of the big table, after hitting F5 those value jump as I have described.

Browser: FireFox

Questions: 1) how do I fix this? 2) is it normal behavior for a browser to try to put entered value after refresh? or do I have a rogue code somewhere doing that?

Untested: give the inputs unique name values.

To help answer question 2.. It depends on the browser. For Firefox, it seems refreshing the page attempts to perform the last request you made to the server (whether it was a postback or not), while also maintaining your control values (IE will not maintain control values upon refresh). You're probably right, the problem lies in your plugin. Sorry, I can't help you with question 1 :(