Issue in modifying newly inserted element properties in DOM

I have a function for a button which is called on click event like this.Once clicked,a copy of element is inserted immediate after the row of the clicked button.I need to change the ID and name of some elements in the newly inserted row.

<tr class="tr_38">
       <td>Maths [ Math01 ]</td>
       <td>Required</td>
       <td>
            <select style="width: 250px;" name="TeacherID[2318]" id="TeacherID[2318]">
            <option selected="" value="132">Dawn Herus - [ID : 132]</option>
            <option value="246">Margaret Wilson - [ID : 246]</option>
            </select>
       </td>
       <td>
            <input class="date hasDatepicker" id="ExamDate_2318" name="ExamDate[2318]" value="02/28/2017"  type="text">
            <input style="width: 100px;" id="ExamTime_2318" name="ExamTime[2318]" value="8:00" type="text">
       </td>
       <td><input value="+" class="more-38-0 more_button" type="button">
       </td>
      </tr>

Jquery function:

 var counter = -1;
    $(document).on ('click','.more_button',function(){
        var courseID='';
        var row_classname =  $(this).closest('tr').prop('class');
        $.each($(this).prop('class').split(' '), function(i, name) {
            if (name.indexOf('more-') > -1) {
                courseID = name.split('-')[1];
                return false;
            }
        });
          var newrow = '<tr class="'+row_classname+'"><td>'+$(this).parent().parent().find('td:eq(0)').text()+
          '</td><td>'+$(this).parent().parent().find('td:eq(1)').text()+
          '</td><td>'+$(this).parent().parent().find('td:eq(2)').html()+'</td><td>'+
          $(this).parent().parent().find('td:eq(3)').html()+'</td><td><input type="button" value="+" class="more-'+
          courseID+'-1 more_button"><input type="button" class="remove" value="X">'+
          '</td></tr>';

          $newrow = $(newrow);
          $(newrow).insertAfter($(this).closest('tr'));
          $newrow.find('td:eq(2)').find('select').prop('id','TeacherID['+counter+']');//.prop('name','TeacherID['+counter+']');
          alert($newrow.find('td:eq(2)').html());
          $newrow.find('td:eq(3)').find('input[id^="ExamDate_"]').prop('id','ExamDate_'+counter).prop('name','ExamDate['+counter+']');
          $newrow.find('td:eq(3)').find('input[id^="ExamTime_"]').prop('id','ExamTime_'+counter).prop('name','ExamTime['+counter+']');
          alert($newrow.find('td:eq(3)').html());
          $(this).hide();
          counter--;
    });

When I check alert() after modifying the ID and name of elements,the alert is showing chaned values,but the DOM is not changed.

FIDDLEhttps://jsfiddle.net/anazvak/r3qhokqn/6/

Solution

var counter = -1;
        $(document).on ('click','.more_button',function(){
            var courseID='';
            var row_classname =  $(this).closest('tr').prop('class');
            $.each($(this).prop('class').split(' '), function(i, name) {
                if (name.indexOf('more-') > -1) { // or name.indexOf('toaster') === 0
                    courseID = name.split('-')[1];
                    return false;
                }
            });
              var newrow = $('<tr class="'+row_classname+'"><td>'+$(this).parent().parent().find('td:eq(0)').text()+
              '</td><td>'+$(this).parent().parent().find('td:eq(1)').text()+
              '</td><td>'+$(this).parent().parent().find('td:eq(2)').html()+'</td><td>'+
              $(this).parent().parent().find('td:eq(3)').html()+'</td><td><input type="button" value="+" class="more-'+
              courseID+'-1 more_button"><input type="button" class="remove" value="X">'+
              '</td></tr>');
              var $newrow = $(newrow);
	 $newrow.find('td:eq(2)').find('select').prop('id','TeacherID['+counter+']').prop('name','TeacherID['+counter+']');
              //alert($newrow.find('td:eq(2)').html()); 
              $newrow.find('td:eq(3)').find('input[id^="ExamDate_"]').prop('id','ExamDate_'+counter).prop('name','ExamDate['+counter+']');
              $newrow.find('td:eq(3)').find('input[id^="ExamTime_"]').prop('id','ExamTime_'+counter).prop('name','ExamTime['+counter+']');
              $(newrow).insertAfter($(this).closest('tr'));
              $(this).hide();
              counter--;
        });
        
        $(document).on ('click','.remove',function(){
            var length = 0;
            $('.'+$(this).closest('tr').prop('class')).not(this.closest('tr')).each(function(){
                if($(this).find('td:eq(4)').find('.more_button:visible').length)
                {
                    length += $(this).find('td:eq(4)').find('.more_button:visible').length;  
                }
            });
            if(length == 0)
            {
                $(this).closest('tr').prev('tr').find('td:eq(4)').find(':hidden').show();
                $(this).closest('tr').remove();
            }
            else
            {
                $(this).closest('tr').remove();
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="tr_38">
                                                    <td>Maths [ Math01 ]</td>
                                                    <td>Required</td>
                                                    <td>
                                                        <select style="width: 250px;" name="TeacherID[2318]" id="TeacherID[2318]"><option selected="" value="132">Dawn Herus - [ID : 132]</option><option value="246">Margaret Wilson - [ID : 246]</option></select>
                                                    </td>
                                                    <td>
                                                        <input class="date hasDatepicker" id="ExamDate_2318" name="ExamDate[2318]" value="02/28/2017"  type="text">
                                                        <input style="width: 100px;" id="ExamTime_2318" name="ExamTime[2318]" value="8:00" type="text">
                                                    </td>
                                                    <td><input value="+" class="more-38-0 more_button" type="button"></td>
                                                </tr>
                                                <tr class="tr_290">
                                                    <td>Arabic 2 [ Arab 2 ]</td>
                                                    <td>Elective</td>
                                                    <td>
                                                        <select style="width: 250px;" name="TeacherID[2326]" id="TeacherID[2326]"></select>
                                                    </td>
                                                    <td>
                                                        <input class="date hasDatepicker" id="ExamDate_2326" name="ExamDate[2326]" value="02/28/2017"  type="text">
                                                        <input style="width: 100px;" id="ExamTime_2326" name="ExamTime[2326]" value="8:00"  type="text">
                                                    </td>
                                                    <td><input value="+" class="more-290-0 more_button" type="button"></td>
                                                </tr>
</table>

Fiddle as well: https://jsfiddle.net/HappyiPhone/r3qhokqn/7/

Hope it helps!