Jquery change id of child element
<p>I am creating one new row like</p>

<pre><code> var newRow = $(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');
</code></pre>

<p>Now i want to change the id of the input element.How to do this? I am thinking of</p>

<pre><code>var i = gridInAnsLength;
  $('input', newRow).each(function() {
    $(this)[0].id = "Col" + counter + "_" + (i++)
                 });
</code></pre>

<p>But its not workin.Please Suggest.</p>

<p>My html  mock up is like</p>

<p></p>

<pre><code>&lt;head&gt;
    &lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        div{ padding:4px; }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(

        function() {
            var counter = 2;
            $('a.add').live('click', function() {
                if (counter &gt; 5) {
                    alert("Only 5 textboxes allowed");
                    return false;
                }
                var newRow =
                $(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');

                var i = 2;
                $('input', newRow).each(function() {
                    $(this).attr("id", "Col"+ (i++));

                });

                $(this).text('Remove').removeClass('add').addClass('remove');
                counter++;
            });
            $('a.remove').live('click', function() {
                $(this).closest('tr').remove();
                counter--;
            });
            $("#getButtonValue").click(function() {
                var gridInAnswerValuesHtml = "";
                $(".grdAns").each(function() {
                    //ansString += this.value+",";
                    gridInAnswerValuesHtml += "&lt;input type = \"hidden\" name = \"gridInAnswers\" value = \"";
                    gridInAnswerValuesHtml += this.value;
                    gridInAnswerValuesHtml += "\"&gt;";
                });
                alert(gridInAnswerValuesHtml);

            });


        });
    &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;table id="gridInAnswers"&gt;
            &lt;tr&gt;
                &lt;th&gt;
                    Min Value
                &lt;/th&gt;
                &lt;th&gt;
                    Max Value
                &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;input type="text" name="col1" id="Col1_2" class="grdAns" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type="text" name="col1" id="Col1_3" class="grdAns" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;a href="#" class="add"&gt;Add&lt;/a&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;input type='button' value='Get TextBox Value' id='getButtonValue'&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/body&gt;
</code></pre>

<p></p>
