How to get multiple textareas with TinyMCE on same page dynamically in an MVC 4 app page? - asp.net-mvc-4

Question

I have what I think is a simple scenario where I have to generate multiple textareas with RTE capability. I am using TinyMce which works marvelously if I only have one textarea, but the others don't. I have created a simple example MVC 4 app to try to get it all working before migrating my new knowledge to the real app. There are other items on this page that are all editable so it appears that the problem might stem from the html helper. Or from the fact that the resultant html shows that all three textareas have the same id. However, since the code doesn't obviously reference the id I didn't think I would matter. Anyone know for sure?
I have a simple model:
TextModel text = new TextModel();
text.P1 = "This is an editable element.";
I have included TinyMce in my BundleConfig file, then in my _Layout. Then I have a strongly typed view.
#model TinyMCE_lite.Models.TextModel
And a script section to expand my textareas on focus:
<script>
$(window).load(function () {
$('textarea.expand').focus(function () {
$(this).addClass("expanding")
$(this).animate({
height: "10em"
}, 200);
});
$('textarea.expand').blur(function () {
$(this).animate({
height: "28px"
}, 100);
$(this).removeClass("expanding")
});
});
Then I crank out three in a loop:
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<fieldset>
<h1 class="editable">Editable header</h1>
#for (int count = 0; count < 3; count++ )
{
int index = count + 1;
<h3>#index</h3>
<p class="editable">#Html.DisplayFor(model => model.P1)</p>
#Html.TextAreaFor(model => model.P2, 0,0, new { #class = "expand" })
}
<div style="margin-top: 25px;"><input type="submit" value="Save" /></div>
</fieldset>
}
The first one acts as expected, showing the editor elements, but not the others. All three expand as expect. Hopefully I have overlooked something simple. Any ideas?

Answer 1

Wow! Turns out it was the identical ids. All I had to do was create unique ids and it works nicely.
I changed this:
#Html.TextAreaFor(model => model.P2, 0,0, new { #class = "expand" })
to this:
#Html.TextAreaFor(model => model.P2, 0,0, new { #class = "expand", id = #count })
Hopefully this will prevent someone else from hours of agony trying to figure this out.