CSS not getting applied after adding rows using fnAddData

Hi Allan,
I have datatable which is initialised in document.ready().
I am trying to add rows to this table on click of a html button.
For one of the tds in the row, I am using a class to get editable select box. Reference: http://coffeescripter.com/code/editable-select/
After adding a row, editable select class is not getting applied though i passing the class attribute also in the
array input to the fnAddData api.

Please find the array contents below
var arr = ['<select name="locationName" id="locationName class="editable-select"> <br/>
<option value="Koala Computer">Koala Computer</option> <br/>
<option value="Help Computer">Help Computer</option> <br/>
<option value="Dora Computer">Dora Computer</option> <br/>
<option value="Makmur Computer">Makmur Computer</option> <br/>
</select>',
'<input type="text" value=" " size="8"></input>',
'<input type="text" value=" " size="8"></input>']


"editable-select" class has been initilased in a script tag
<script type="text/javascript">
$(function(){
$('.editable-select').editableSelect(
{
bg_iframe: true,

case_sensitive: false, // If set to true, the user has to type in an exact
// match for the item to get highlighted
items_then_scroll: 10 // If there are more than 10 items, display a scrollbar
}
);
var select = $('.editable-select:first');
var instances = select.editableSelectInstances();
});

</script>


Please let me what could be the issue.

Thanks In Advance.

Regards,
Tara