Bootstrap 3 Multiple Accordions on one page must assign data-parent values after the fact - twitter-bootstrap-3

Question

Due to some restrictions with a CMS I am developing for I cannot create the intended markup for a proper accordion with Bootstrap 3 on page load, however I can get it very close.
The issue I am having is that the initial
panel group id (accordion1), I cannot assign the proper data-parent="accordion1" to the data-toggle="collapse" element in the panel. I am attempting to rewrite the data-parent references to the proper accordion ID but it does not have an affect, it is like the collapse binding is already in place and I'm not sure how to get around it.
This is an example of my issue. (id's are the same on page load but I try to rewrite them with a script on dom-ready)
$(document).ready(function() {
$('.panel-group').each(function() {
var $t = $(this);
var id = "#" + $t.attr("id");
$t.find('[data-parent]').attr("data-parent", id);
});
});
This function fixes the markup as BS3 wants but the functionality is still broken.
http://plnkr.co/CTBekXVyzU0xjzlud2N1

Answer 1

I ended up figuring out that the error was my own. Multiple accordions is not an issue. Where I went wrong was in the markup. The error in my ways weas that the data-toggle="collapse" element's href="#collapse-0" for example was duplicated for both accordions. They must be unique. The CMS restriction still existed on the data-parent however. This caused me to redo my script (which does work now for multiple accordions)
$('.panel-group').each(function(){
//setup each panel group with individual id's appropriately
var $t = $(this);
var id = "#" + $t.attr('id');
var randomInt = $t.attr('id').split('_')[1]; //extract
$t.find('.panel').each(function(){
//set the proper collapsable targets for each
var $t = $(this);
var $dataParent = $t.find('[data-parent]');
var href = $dataParent.attr('href');
//set the collapse target
var $targetId = $dataParent.attr('href', injectRandom(href, randomInt));
var targetId = $targetId.attr('href').split('#')[1];
//set the random id's
$dataParent.attr('data-parent', id);
//set the collapse container
$dataParent.parents('.panel-heading:first').next().attr('id', targetId);
});
//open first pane
$t.find('[data-toggle]:first').trigger('click');
});
I will update the plunkr