Can't modify class name in cloned markup
<p>I'm having a problem getting cloned markup, containing a class name, to be modified.</p>

<p>The class name is 'mySelectBox' and after being appended 4 times I want to be able to change the instance of the class name to mySelectBox1, mySelectBox2, etc.</p>

<p>Here's the simplified code - hope someone can help - thanks:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt;

&lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

$("document").ready(function() {

    var val = 4;
    var countThird = 0;
     for (var i = 0; i &lt; val; i++) {
         countThird++;
            // Clone the Template
            var $cloned = $('#template').clone(true);

            $('#myTable').append($cloned.contents());
        }

    &lt;!--CODE THAT'S NOT WORKING--&gt;
    //$(".mySelectBox").css("background-color", "red");//test I can select

   var cloneCount = 1;

   for (i=1;i&lt;=4;i++){

      $('.mySelectBox')//grab mySelectBox
          .clone()// copy it
          .attr('class', 'mySelectBox'+ cloneCount++)
          .insertAfter($('[class^=mySelectBox]:last'))       
   }
    &lt;!--/CODE THAT'S NOT ....--&gt;
});
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="tableMarkup"&gt;
  &lt;div id="myTable"&gt;&lt;/div&gt;
  &lt;div id="template" style="display: none"&gt;
    &lt;ul style="width:65%; background-color:#67c1fd"&gt;
      &lt;li&gt;This is a line of text&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul style="width:9%;"&gt;
      &lt;li&gt;
        &lt;div class="styled-select"&gt;
          &lt;select class="mySelectBox"&gt;
            &lt;option value="10"&gt;10&lt;/option&gt;
            &lt;option value="20"&gt;20&lt;/option&gt;
            &lt;option value="30"&gt;30&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
