Moving DIV up and down using jquery

				
					  <style>
      .container {
        width: 500px;
        margin: 0 auto;
      }
      .container > div {
        display: flex;
        margin: 3px;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        border-radius: 10px;
        align-items: space-between;
        justify-content: space-between;
      }
      .container > div > span {
        font-weight: bold;
        font-size: 18px;
        width: 80%;
      }
    </style>
    <div class="container">
      <div class="div1">
        <span>div 1</span><button class="btn-up">Up</button
        ><button class="btn-down">Dn</button>
      </div>
      <div class="div2">
        <span>div 2</span><button class="btn-up">Up</button
        ><button class="btn-down">Dn</button>
      </div>
      <div class="div3">
        <span>div 3</span><button class="btn-up">Up</button
        ><button class="btn-down">Dn</button>
      </div>
      <div class="div4">
        <span>div 4</span><button class="btn-up">Up</button
        ><button class="btn-down">Dn</button>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        $(".btn-down").on("click", function () {
          let pparent = $(this).parent();
          pparent.next().insertBefore(pparent);
        });

        $(".btn-up").on("click", function () {
          let pparent = $(this).parent();
          pparent.prev().insertAfter(pparent);
        });
      });
    </script>