Memunculkan foreach satu persatu

Saya mencoba untuk menampilkan post terbaru dari masing-masing kategori bersamaan dengan javascript saya, namun justru menampilkan semuanya seperti gambar dibawah ini, menampilkan tiga sekaligus.

Berikut code yang saya tulis:

for (var i in books) { //JS Code

        // Proses js

	<?php // Start PHP
 	$catids = array(39, 37, 2); // Kategori untuk tes
	foreach ( $catids as $catid ) {

        	$my_query = new WP_Query( array( 'cat' => $catid, 'ignore_sticky_posts' => 1, 'posts_per_page' => 1, 'no_found_rows' => true ) );

		if ( $my_query->have_posts() ) :

            	while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
                    html += '<a href="<?php the_permalink(); ?>">»Bab <?php the_title(); ?></a></div>'; // Javascript Code, Menampilkan hasil foreach lewat javascript
            <?php endwhile;

        endif;

        wp_reset_postdata();
    } ?> // End PHP

        $bookcontainer.append(html);
        // Memasukan semua hasil proses JS dan PHP ke suatu elemen
} // JS Code

Apa ada solusi untuk ini? agar dapat muncul satu persatu? Urutan array kategori dengan Javascript dan PHP sama.