how to have the like and unlike when clicked and show the clicked image when went back and returned again to that page.
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#like1" ).click(function() {
$("#like1").attr("src","images/like_on.png");
$("#unlike1").attr("src","images/unlike_off.png");
});
$("#unlike1").click(function() {
$("#like1").attr("src","images/like_off.png");
$("#unlike1").attr("src","images/unlike_on.png");
});
$("#like2" ).click(function() {
$("#like2").attr("src","images/like_on.png");
$("#unlike2").attr("src","images/unlike_off.png");
});
$("#unlike2").click(function() {
$("#like2").attr("src","images/like_off.png");
$("#unlike2").attr("src","images/unlike_on.png");
});
});
</script>
<div id="main-wrapper">
<div data-role="header" id="header" data-position="fixed">
<div id="back-btn">
<a href="#" onClick="window.history.back();" ><img src="images/back_btn.png" width="42" height="41" /></a>
</div>
<div id="logo">
</div>
<div id="tc-btn">
<a href="tc_list.html" data-transition="slide"><img src="images/tc_btn.png" width="42" height="41" /></a>
</div>
</div>
<div id="content-area" >
<br>
<div id="content-area1"> <p style="color:#FFFFFF;font-size:14px;margin-left:25px;padding-top:5px;word-spacing:5px;" class="content-videos">HOW TO PUT ON YOUR ACUVUE BRAND CONTACT LENSES</p></div>
<div id="content-video1area"><a href="play_video1.html"><img src="images/play_video.png" width="57" height="53" style="float:right; margin-right: 278px;margin-top: 87px;"/></a></div>
<div id="content-area2"><p style="color:#FFFFFF;font-size:14px;margin-left:15px;padding-top:22px;">HELPFUL?</p><img src="images/unlike_off.png" width="39" height="33" style="float:right; margin-right: 55px;margin-top: -23px;" id="unlike1"/><img src="images/like_off.png" width="39" height="33" style="float:right; margin-right: -83px;margin-top: -23px;" id="like1"/></div>
<br>
<div id="content-area1"><p style="color:#FFFFFF;font-size:14px;margin-left:25px;padding-top:5px;word-spacing:5px;" class="content-videos">HOW TO TAKE OFF YOUR ACUVUE BRAND CONTACT LENSES</p> </div>
<div id="content-video2area"><a href="play_video2.html"><img src="images/play_video.png" width="57" height="53" style="float:right; margin-right: 278px;margin-top: 87px;"/></a></div>
<div id="content-area2"><p style="color:#FFFFFF;font-size:14px;margin-left:15px;padding-top:22px;">HELPFUL?</p><img src="images/unlike_off.png" width="39" height="33" style="float:right; margin-right: 55px;margin-top: -23px;" id="unlike2"/><img src="images/like_off.png" width="39" height="33" style="float:right; margin-right: -83px;margin-top: -23px;" id="like2"/></div>
</div>
the above is the code, my issue is when am clicking the images are changing but when i went back or to another tab and returning back the selected images are not displaying and the default images are displaying. any help? thanks.