How to send post request of content editable elements using ajax

How to send post request of content editable elements using ajax

In my project parsing JSON data from controller to ui page.And then modify the required the changes in the UI page .USing Contenteditable attribute i can make the elements to edit.Once the modifications has been done, changes has to be made in MYSQL database.I am trying to send the editable elements using AJAX post request.But request is not happening.Can anybody suggest me how to send request 

AJAX request am trying to send

<script>
 $(document).ready(function(argument) {
      
 $('#save').click(function(){ 

 var term1 = $('#Term1').text();
 var term1grade = $('#grade1').val(); 
 var term2 = $('#Term2').val();
 var term2grade = $('#grade2').val();
 var csgrade = $('#cs').val();
 var skillsgrade = $('#skills').val();
 var remark = $('#Remark').val();
 var name = $('#1').val();
 var admno = $('#2').val();
 var batch = $('#3').val();
 var totalatt = $('#4').val();
 var workingdays = $('#workingdays').val();
alert(term1);
 
 $.ajax({
            method:'POST',            
          data:{term1:term1,
                  term1gradeup:term1grade,
                term2up:term2,
                  term2gradeup:term2grade,
                csgradeup:csgrade,
                  skillsgradeup:skillsgrade,
                  remarkup:remark,
                nameup:name,
                admnoup:admno,
                batchup:batch,
                totalattup:totalatt,
                workingdaysup:workingdays
                 },
          dataType:"text", 
            url: "update", success: function(data){
 
 
 }
 });
 });
  });
 </script>


Parsing Json data into html table

$.each(data1.subjects, function (i, item) {
            
         trHTML += '<tr><td style="text-align: left;margin-left:2px;">' + data1.subjects[i] + '</td><div><td name="termdata" id="Term1" class="total" contenteditable="true">' + data1.ITerm[i] + '</td></div><td id="grade1" contenteditable="true">' + data1.ITermgrade[i] +
                    '</td><td id="Term2" class="total1" contenteditable="true">' + data1.IITerm[i] + '</td><td id="grade2" contenteditable="true">' + data1.IITermgrade[i] + '</td></tr>';
        
        
        });

HTML table

<table border="1px" id="customers" style="width: 700px;">
<tr>
    <th rowspan="2" style="text-align:center;line-height: 45px;">Subjects</th>
    <th colspan="2" style="text-align:center;line-height: 45px;">I Term Examiantion</th> 
    <th colspan="2" style="text-align:center;line-height: 45px;">II Term examination</th> 
    
  </tr>
  <tr>
    
    <th style="text-align:center;line-height: 45px;">Marks</th> 
    <th style="text-align:center;line-height: 45px;">Grade</th> 
    <th style="text-align:center;line-height: 45px;">Marks</th>
    <th style="text-align:center;line-height: 45px;">Grade</th>
  </tr>
   <tr>
    <tfoot>
    <tr>
      <td>Total</td>
      <td colspan="2"><span class="sum"> </span></td>
       <td colspan="2"><span class="sum1"> </span></td>
    </tr>
  </tfoot>
</table>