Moving DIV up and down using jquery

<style> .htmldiv .container { margin: 0 auto; } .htmldiv .container > div { display: flex; margin: 3px; padding: 5px; border-bottom: 1px solid #ccc; border-radius: 10px; align-items: space-between; justify-content: space-between; } .htmldiv .container > div > span { font-weight: bold; font-size: 18px; width: 80%; } .htmldiv button{ margin: 2px; } </style> div 1<button>Up</button ><button>Dn</button> div 2<button>Up</button ><button>Dn</button> div 3<button>Up</button ><button>Dn</button> div 4<button>Up</button ><button>Dn</button> <pre data-line=""> <code readonly="true"> <xmp> <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 1<button>Up</button ><button>Dn</button> div 2<button>Up</button ><button>Dn</button> div 3<button>Up</button ><button>Dn</button> div 4<button>Up</button ><button>Dn</button> </xmp> </code> </pre>