Добавить динамические закрытые панели в бутстрап 3 аккордеона

Я использую Bootstrap 3, и мне нужно добавить в него динамические панели. У меня есть что-то вроде этого:

+------------------+
| Panel 1 (closed) |
+------------------+
| Panel 2 (opened) | <-- This is the template panel
| CONTENT          |
+------------------+
| Dynamic panels   | <-- All dynamic panels must be closed, not opened
+------------------+     after they are added

Проблема в том, что если панель 2 открыта, откроются динамические панели (клонированные из панели 2). Если панель 2 закрыта, динамические панели закрываются.

Я хочу, чтобы все динамические панели были закрыты, и только когда их заголовки будут нажаты, они будут открыты (например, в примере Bootstrap). Как я могу это исправить?

Это мой код jQuery.

var $template = $(".template");

var hash = 2;
$(".btn-add-panel").on("click", function () {
    var $newPanel = $template.clone();
    // I thought that .in class makes the panel to be opened
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").attr("href",  "#" + (++hash))
             .text("Dynamic panel #" + hash);
    $newPanel.find(".panel-collapse").attr("id", hash);
    $("#accordion").append($newPanel.fadeIn());
});

JSFIDDLE

Ответ 1