Jquery CLEditor with bootstrap tabs not working

Question

I am using jquery cleditor for wsyiwyg editor with bootstrap tab in my system. The textarea in the first tab is initialized and perfectly working but the textarea in second tab is initialized but I cannot type or do anything with it. By the way multiple editors can be used in a single page. What might be the problem with this?

Here is my sample code

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                              data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                               data-toggle="tab">Profile</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
        <textarea name="test" id="test" cols="30" rows="10"></textarea>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
        <textarea name="test2" id="test2" cols="30" rows="10"></textarea>
    </div>
</div>

And I initialized the cleditor using the following script

<script>
    $("textarea").cleditor();
</script>