title: Jquery replace part of id
body: <p>I am trying to dynamically add a new row in my table by cloning the last row and modifying its id, so that my MVC ModelBinder picks that up when I submit the form. Below is the html generated for the table:</p>
  
  <pre><code>&lt;tr id="trImg_-1"&gt;
  &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;input id="MediaList_0__MediaCaption" class="form-control" type="text" value="Blah" name="MediaList[0].MediaCaption" data-val-required="The Image Caption field is required." data-val="true"&gt;
          &lt;span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MediaList[0].MediaCaption"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  &lt;td&gt;
      &lt;input id="MediaList_0__MediaCaptionDescription" class="form-control" type="text" value="Caption Desc" name="MediaList[0].MediaCaptionDescription" data-val-required="The Image Caption Description field is required." data-val="true"&gt;
  &lt;/td&gt;
  &lt;td&gt;
      &lt;input id="MediaList_0__SortOrder" class="form-control" type="text" value="0" name="MediaList[0].SortOrder" data-val-required="The Sort Order field is required." data-val-number="The field Sort Order must be a number." data-val="true"&gt;
      0
  &lt;/td&gt;
  &lt;td&gt;
      &lt;img class="img-thumbnail" alt="Product Image" src="CurrentImage"&gt;
  &lt;/td&gt;
      &lt;td&gt;
      &lt;button id="btnRemoveImage" class="btn btn-danger btn-sm" type="button"&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I have implemented jquery to clone the row and create a new row, however I am struggling to change the index from <code>MediaList_0__MediaCaption</code> to <code>MediaList_1__MediaCaption</code> for all the inputs within this. Any ideas?</p>
  
  <p>Below is the jquery I am using</p>
  
  <pre><code>var $tableBody = $('#tblImage').find("tbody");
          $trLast = $tableBody.find("tr:last");           // find last row
          $trNew = $trLast.clone();                       // clone to new row
  
          var tr_Id = $($trNew).attr('id');       // get row id *Mashed*
          var arr_RowStr = tr_Id.split('_');         // extract the indexarr_Row[1]
          var tr_RowIdOld = parseInt(arr_RowStr[1], 10);  // 10 is for decimal [Base 10]
          var tr_RowIdNew = tr_RowIdOld + 1;              // get new id
  
          var tr_FullNew = arr_RowStr[0] + '_' + tr_RowIdNew;     // get new id
  
          $trNew.attr('id', tr_FullNew);
  
          $trNew.find('input:text').val('');
  
          $trLast.after($trNew);
  </code></pre>