Вставить HTML после nth div, после того как divs переупорядочены

Question

У меня есть серия div, которые загружаются с помощью PHP. Они переупорядочиваются при загрузке в jQuery и могут быть переупорядочены с помощью кнопок. Я хочу вставить некоторый HTML после n-го div (например: всегда после второго, независимо от порядка). Я пробовал:

$('#card-box').children(':eq(1)').after('<b>test</b>'); 

Прямо под линиями, где divs переупорядочиваются. Но он помещает его под div, который является вторым в PHP, прежде чем они будут перенаправлены jQuery, и после сортировки с помощью кнопки он перемещается в начало.

Разделители переходят в jQuery по атрибуту data-id. Как так:

var div = $('#card-box'); 
var listitems = div.children('div.card').get(); 
listitems.sort(function (a, b) { 
    return (+$(a).attr('data-id') > +$(b).attr('data-id')) ? -1 : (+$(a).attr('data-id') < +$(b).attr('data-id')) ? 1 : 0; 
}); 

Answer 1

Вам нужно повторно вводить их в DOM после сортировки

var div = $('#card-box'), 
    listitems = div.children('div.card'); 

listitems.sort(function (a, b) {.... 
}); 

listitems.detach().appendTo(div); 
div.children(':eq(1)').after('<b>test</b>'); 

Fiddle