Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Ex 1</title>
    <style type="text/css">
        #div1{
            background-color: red;
            height: 30px;
        }
        #div2{
            background-color: blue;
            height: 30px;
        }
        #div3{
            background-color: green;
            height: 30px;
        }
        #div4{
            background-color: orange;
            height: 30px;
        }
        #div5{
            background-color: yellow;
            height: 30px;
        }
        #div6{
            background-color: black;
            height: 30px;
        }
        #div7{
            background-color: fuchsia;
            height: 30px;
        }
        #div8{
            background-color: #bada55;
            height: 30px;
        }
        #div9{
            background-color: lime;
            height: 30px;
        }
        #div10{
            background-color: pink;
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="div1" onclick="swap()"></div>
    <div id="div2" onclick="swap()"></div>
    <div id="div3" onclick="swap()"></div>
    <div id="div4" onclick="swap()"></div>
    <div id="div5" onclick="swap()"></div>
    <div id="div6" onclick="swap()"></div>
    <div id="div7" onclick="swap()"></div>
    <div id="div8" onclick="swap()"></div>
    <div id="div9" onclick="swap()"></div>
    <div id="div10" onclick="swap()"></div>

    <script type="text/javascript">
        function swap(){
            var i=1;
            for (i=1;i<=10;i++){
                var myvar = "div" + i ;
                if(i==10)
                    var j = 1;
                else
                    var j = i + 1;
                var nextvar = "div" + j;
                console.log(myvar, nextvar);
                var div = document.getElementById(myvar);
                div.parentNode.insertBefore(div, document.getElementById(nextvar));
            }
        }
    </script>
</body>
</html>