I've a few divs which need to be swapped on click of the corresponding buttons.

```
<html>
    <head>
        <style>
            .box {
                height: 25%;
                width: 45%;
                padding: 1%;
                margin-left: 1%;    
                margin-top: 1%;
                border: 1px solid black;
                float: left;

            }

        </style>
        <script src="css/jquery-3.2.0.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="box" id="one">
                <p>one</p>
                <button onclick="moveMe_right()">Swap with right!</button>
                <button onclick="moveMe_down()">Swap with down!</button>
            </div>

            <div class="box" id="two">
                <p>two</p>
                <button onclick="moveMe_left()">Swap with left!</button>
                <button onclick="moveMe_down()">Swap with down!</button>
            </div>

            <div class="box" id="three">
                <p>three</p>
                <button onclick="moveMe_right()">Swap with right!</button>
                <button onclick="moveMe_top()">Swap with top!</button>

            </div>

            <div class="box" id="four">
                <p>four</p>
                <button onclick="moveMe_left()">Swap with left!</button>
                <button onclick="moveMe_down()">Swap with down!</button>
            </div>

        </div>
    </body>
</html>

```

For e.g., when I click on Swap with right in div one, it should swap div one and div 2 visually as well as in the DOM it should change to -

```
<div class="container">
                <div class="box" id="two">
                    <p>two</p>
                    <button onclick="moveMe_right()">Swap with right!</button>
                    <button onclick="moveMe_down()">Swap with down!</button>
                </div>

                <div class="box" id="one">
                    <p>one</p>
                    <button onclick="moveMe_left()">Swap with left!</button>
                    <button onclick="moveMe_down()">Swap with down!</button>
                </div>

                <div class="box" id="three">
                    <p>three</p>
                    <button onclick="moveMe_right()">Swap with right!</button>
                    <button onclick="moveMe_top()">Swap with top!</button>

                </div>

                <div class="box" id="four">
                    <p>four</p>
                    <button onclick="moveMe_left()">Swap with left!</button>
                    <button onclick="moveMe_down()">Swap with down!</button>
                </div>

            </div>

```

Likewise, how would I also achieve the same for swapping with any of the left, top, down divs?