A client has a web page with a series of tasks. They want to implement a reordering feature that behaves like the following example:

After performing the clicks shown in the animation above, the document's body should be:

<div>
    <span>Prepare presentation</span>
    <button class="downButton" type="button">&darr;</button>
</div>
<div>
    <span>Read emails</span>
    <button class="downButton" type="button">&darr;</button>
    <button class="upButton" type="button">&uarr;</button>
</div>
<div>
    <span>Monthly report</span>
    <button class="upButton" type="button">&uarr;</button>
</div>

Implement the function initialize to add the requested functionality. The reordering behavior should work with any number of tasks.