Question

The problem is that I do not know how to break the loop for the first number and start again for the next one. Currently, one span.nNumber has a total digits of the two numbers (123456) and the next span.nNumber contains digits only from another number (456).
Goal is to create sequence 123 and 456:

Markup:

<span class='nNumber'>
 <span>1</span>
 <span>2</span>
 <span>3</span>
</span> 

<span class='nNumber'>
 <span>4</span>
 <span>5</span>
 <span>6</span>
</span>

JavaScript (example):

$('div .number').each(function(){
    var number = $(this).text();
    var i = 0;

    $(this).parent().prepend($("<span class='nNumber'></span>"));
    while(i<number.length)
    {
        $(this).closest('span').hide();
        var nChar = number.charAt(i);  
        i++;
        $('.nNumber').append('<span class="digit-'+nChar+'">'+nChar.split(" ").join(", ")+'</span>');
    }
});​

Answer 1

In your while loop, use the following;

$(this).parent().find('.nNumber').append('<span class="digit-'+nChar+'">'+nChar+'</span>');

This way, you’ll always modify the nNumber class inside the div you are iterating over. If you use $(".nNumber") you’ll get all elements whose class is nNumber, even the ones that are not in your current div. That’s why the second iteration of .each() adds the extra digits 456 to the first span.

DEMO.