jquery - One tab's data is being duplicated into other tabs -

jquery - One tab's data is being duplicated into other tabs -

i'm creating jquery tabs, find one's info ( in case iframe ) beingness duplicated in tabs. html looks this

<div class="tabs"> <ul> <li><a href="#room_booking">make booking</a></li> <li><a href="#info"> info </a></li> <li><a href="#edit_pro"> edit info </a></li> </ul> <div id="room_booking"> <iframe src="/booking/"> </iframe> </div> <div id="info"> <fieldset> <label>name : </label><input class="box" type="text" value="{{ userprofile.first_name}} {{userprofile.last_name }}" readonly="" /> <br /> <label>e-mail: </label><input class="box" type="text" value="{{ userprofile.email }}" readonly="" /> <br /> <label>user name : </label><input class="box" type="text" value="{{ userprofile.username}}" readonly="" /> <br /> </fieldset> </div> <div id="#edit_pro"> <iframe src="/edit/"> </iframe> </div> </div>

my .js file has

$(document).ready(function(){ $('.tabs').tabs(); });

this looks - https://drive.google.com/file/d/0b_xsn54pdmu8bdryefzpu1rtqlu/edit?usp=sharing

any thought what's causing this? thanks

remove '#' edit_pro div id.

<div class="tabs"> <ul> <li><a href="#room_booking">make booking</a></li> <li><a href="#info"> info </a></li> <li><a href="#edit_pro"> edit info </a></li> </ul> <div id="room_booking"> <iframe src="/booking/"> </iframe> </div> <div id="info"> <fieldset> <label>name : </label><input class="box" type="text" value="{{ userprofile.first_name}} {{userprofile.last_name }}" readonly="" /> <br /> <label>e-mail: </label><input class="box" type="text" value="{{ userprofile.email }}" readonly="" /> <br /> <label>user name : </label><input class="box" type="text" value="{{ userprofile.username}}" readonly="" /> <br /> </fieldset> </div> <div id="edit_pro"> <iframe src="/edit/"> </iframe> </div> </div>

demo: http://jsfiddle.net/kx5l2/1/

jquery html5