Toolbar does not work

[chicagosky]

Hello

I am using Bootstrap 3 and have a page with two editable DIV's. I am using this plugin on both of them. The hot-keys work just fine and I am able to edit text and manipulate the same with keyboard shortcuts. However while the toolbar appears - pressing on any of the buttons does nothing to the text associated. I have pasted my code below. Any help/advise is much appreciated. FireFox v 31, MacOS X 10.9.4

<div class="btn-toolbar" data-target="#jobresponsibilities" data-role="jobresponsibilities-toolbar">
 <div class="btn-group">
        <a class="btn btn-default" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><i class="glyphicon glyphicon-bold"></i></a>
        <a class="btn btn-default" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><i class="glyphicon glyphicon-italic"></i></a>
        <a class="btn btn-default" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><i class="glyphicon glyphicon-text-width"></i></a>
      </div>
</div> <!-- .btn-toolbar -->
<div class="edit-area" id="jobresponsibilities" contenteditable="true">
<? echo $job->getDescription() ?>
</div>  <!-- .edit-area -->
...
<div class="btn-toolbar" data-target="#jobskills" data-role="jobskills-toolbar">
 <div class="btn-group">
        <a class="btn btn-default" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><i class="glyphicon glyphicon-bold"></i></a>
        <a class="btn btn-default" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><i class="glyphicon glyphicon-italic"></i></a>
        <a class="btn btn-default" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><i class="glyphicon glyphicon-text-width"></i></a>
      </div>
</div> <!-- .btn-toolbar -->
<div class="edit-area" id="jobskills" contenteditable="true">
<? echo $job->getSkills() ?>
</div>  <!-- .edit-area -->

$('#jobresponsibilities').wysiwyg({
    toolbarSelector: '[data-role=#jobresponsibilities-toolbar]'
});
$('#jobskills').wysiwyg({
    toolbarSelector: '[data-role=#jobskills-toolbar]'
});

[chicagosky]

Ok - this has to be the most ridiculous bug (or feature) ever!!
As you can see from my code above, I have named the editable DIV as jobresponsibilities and jobskills. I spent a day trying to figure out why it wont work until I changed the names of the DIV to editor and editor2 and VOLA - it works!!! Also - there is another issue that prevented the second toolbar from from working - and the resolution to the same lies in this link - #52

Final code here -

<div class="btn-toolbar" data-target="#editor" data-role="editor-toolbar">
 <div class="btn-group">
        <a class="btn btn-default" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><i class="glyphicon glyphicon-bold"></i></a>
        <a class="btn btn-default" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><i class="glyphicon glyphicon-italic"></i></a>
        <a class="btn btn-default" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><i class="glyphicon glyphicon-text-width"></i></a>
      </div>
</div> <!-- .btn-toolbar -->
<div class="edit-area" id="editor" contenteditable="true">
<? echo $job->getDescription() ?>
</div>  <!-- .edit-area -->
...
<div class="btn-toolbar" data-target="#editor2" data-role="editor2-toolbar">
 <div class="btn-group">
        <a class="btn btn-default" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><i class="glyphicon glyphicon-bold"></i></a>
        <a class="btn btn-default" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><i class="glyphicon glyphicon-italic"></i></a>
        <a class="btn btn-default" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><i class="glyphicon glyphicon-text-width"></i></a>
      </div>
</div> <!-- .btn-toolbar -->
<div class="edit-area" id="editor2" contenteditable="true">
<? echo $job->getSkills() ?>
</div>  <!-- .edit-area -->

$('#editor').wysiwyg();
$('#editor2').wysiwyg({
    toolbarSelector: '[data-role=editor2-toolbar]'
});