I want to set a global variable in Jquery so that when I click on a list item, the id of the clicked list item becomes the value of the variable.
I have the below code which is also in this fiddle.

However the way I have it: At the moment when you click the list item,the value correctly gets put in the console.log.However afterthat when I click in the demo div,the variable is reset and is undefined.

How do I get the value of id when I click on demo,to be the value of id when I click on the list item?

eg :

when I click on aaa,the value when I click on the demo box should be id-1

when I click on bbb,the value when I click on the demo box should be id-2

    <div id=demo></div>

    <ul>

        <li id=id-1>aaa</li>

        <li id=id-2>bbb</li>

    </ul>



    <script>

    var id;

    jQuery(document).on(click, li, function (event) {

            var id =jQuery(this).attr('id') || '';

            console.log(id);

        $( #demo ).show();

        });



    $(function() {

    $(#demo).click(function(e) {

    console.log(id);

    });

    });



    </script>



    <style>

    #demo {

        border: 1px solid; 

        display:none;

        height: 100px; 

        width: 100px;

    }

    </style>