Append DOM elements names from loop variables

This code not working and I have no idea why ;/

<div class="pet"> some info </div>

for (i = 0; i < 100; i++) {
    $('.pet').append( '<p id="xxx'+ i +'">'+ i +'</p>');

    //other code...

    for (var x = 0; x < 3; x++) {
        $('"#xxx'+ i +'"').append('<p>'+ x +'</p>');
    }
}

but when I for example make in second loop:

$('#xxx20').append('<p>'+ x +'</p>');

it adds everything after 21 element

I am using webkit+nodejs

First you shouldn't be using <p> tags inside of <p> tags because it's a block level element. Then you have some minor errors in your code

for(var i = 0; i < 10; i++){
    $('.pet').append('<p id="xxx'+ i +'">'+ i +'</p>');

    //other code...

    for (var x = 0; x < 3; x++) {
        $('#xxx'+ i).append('<i>'+ x +'</i>');
    }
}

You can see that in your second loop you a comma instead of a semicolon and your selector was too "quoted".