Andrew used .append(), to add the two buttons to the end of the .spoiler element. Why does .prev select the FIRST span?

I see where you're getting confused, and I get it. But when we are talking about the .prev method we're talking about the previous element in the DOM. So if I had three paragraphs in a row, and I currently have the third paragraph selected then the .prev will target the second paragraph:

<p>First paragraph</p>
<p>Second paragraph</p>  // .prev() will target this one
<p>Third paragraph</p>  //if this one is currently selected

So when he selects that button (whichever button it is) it's going to select the first sibling closest and upwards in the DOM. In this case, a span.

edited for additional clarification

Remember, that each of these spans are inside their own paragraph parent container. So we're targeting each span and then adding the button after the span. So the order would actually look a bit like this in HTML:

<p>
   <span></span>
   <button></button>
</p>

<p>
   <span></span>
   <button></button>
</p>

This means that the previous sibling to each button will be the span that is a sibling to the button that is clicked.

Hope that helps!