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>Read emails</span>
    <button class="downButton" type="button">&darr;</button>
</div>
<div>
    <span>Prepare presentation</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 initialize function to apply the described functionality. The body tag will be prepopulated with the initial HTML which includes all the div, span, and buttons tags. The feature should work with any number of tasks.