Why not give the span a id and address it directly instead of traversing with next?

This is for few reasons.

One, it's to show the power of next().

Another reason is because not every element will be directly identifiable by an id or may not have a unique class or other attribute. Now, of course if you are the app/site developer you could uniquely identify anything how you wish. Although what if, for example, you want to manipulate something from a third-party, like a Twitter plugin or something? You're probably going to use something like next() because you know the element you want to manipulate, but there is not really an otherwise convenient way to grab it.

Edit: As kabir k mentions, closely tied relationships are also a good reason for next(). Examples of this could be, as shown in the lesson, messages for inputs, or other form item companions, or icons/images and text. Generally, in cases where a 1-to-1 relationship between siblings can be made.