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 type="litespeed/javascript">$(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>