How to click on a div in one html page and have it create a div in another html page?

Question

I found this code here that allows me to create a div element in a different section by clicking it, it works ok within the same html file as seen below in the fidle

http://jsfiddle.net/fb7Tq/109/

My problem is that i want to make this code work between different html files, how can I go about this??

in the first html I have the initial divs.

<div class="section1">
<div id="1" >1</div>
<div id="2" >2</div>
<div id="3" >3</div>
<div id="4" >4</div>
<div id="5" >5</div>
<div id="6" >6</div>
<div id="7" >7</div>
<div id="8" >8</div>

And then when those divs are clicked, they need to come up in a different html file within this div below.

<div class="section2"></div>

and here is the js

    function testclick() {
    var iLoc = $(this).attr("id");
    $('.section2').append(this);
    $('#'+iLoc).off('click', testclick).bind('click',testclick2) ;
}

function testclick2() {

    var iLoc = $(this).attr("id");
    $('.section1').append(this);
    this.off('click', testclick2).on('click',testclick) ;
}
$('.section1 div').on('click', testclick);
$('.section2 div').on('click', testclick2);

any help will be welcomed.

Answer 1

By what say in your comments, what you need is a web application with server-side code. static html files won't serve. In the end, to achieve what you want, you'll have to send a request (directly or via AJAX) when a user clicks one of your divs, so the server 'saves', in some way, the user's preference and shows the modified page accordingly.

This is not a trivial problem, and certainly something that won't be achieved with a few lines of javascript. It's out of the scope of a question in StackOverflow to explain how to build a web application with server-side code.

EDIT I've read some of the other comments you posted. So you want to make an app with PhoneGap. Well, in that case, maybe you could do something else, using localStorage.

When the ser clicks the div, store the info about what the user selected using localStorage.setItem. LocalStorage is a persistent place to store objects between sessions. Then, the next time you open the page in which you want to display the div, you just read the value stored in localStorage (with localStorage.getItem()), and use the value to display the correct DIV.

More about localStorage here, in the MDN . I hope this servers you. Just take into account that when the user opens the app in a differente device, none of these preferences will be set. Configuration will be stored in the device.