jqueryでテキストエリアに変更を保存するには

Question

テーブル内の項目の変更を保存し、対応する要素を<p>から<textarea>に変更して戻したいが、現在は更新されていない。ここで

例 https://jsfiddle.net/rajjejosefsson/qmeogxgL/12/

JS

$("td").on('click', '.js-edit', function() { 
    $(this).text('Save Changes'); 
    $(this).addClass('js-save'); 

    var img = $(this).parent('td').parent('tr').find('.img-candy'); 
    console.log(img); 
    var imgUrl = img.attr('src'); 

    var tr = $(this).parent('td').parent('tr').find('td p').replaceWith(function() { 
    return $("<textarea />", '').append($(this).contents()); 
    }); 
}); 


$("td").on('click', '.js-save', function() { 

    $(this).text('Edit'); 
    $(this).removeClass('js-save'); 

    var tr = $(this).parent('td').parent('tr').find('td textarea').replaceWith(function() { 
    return $("<p />", '').append($(this).contents()); 
    }); 

    var name = $(this).parent('td').parent('tr').find('.name-td').children('p').text(); 
    var price = $(this).parent('td').parent('tr').find('.price-td').children('p').text(); 
    var description = $(this).parent('td').parent('tr').find('.description-td').children('p').text(); 
    var img = $(this).parent('td').parent('tr').find('.img-candy').attr('src'); 

    var category_id = "a"; 
    var item_id = "a"; 
}); 

Answer 1

$("td").on('click', '.js-save', function() { 

      $(this).text('Edit'); 
      $(this).removeClass('js-save'); 


      var name = $(this).parent('td').parent('tr').find('.name-td').children('textarea').val(); 
      var price = $(this).parent('td').parent('tr').find('.price-td').children('textarea').val(); 
      var description = $(this).parent('td').parent('tr').find('.description-td').children('textarea').val(); 
      var img = $(this).parent('td').parent('tr').find('.img-candy').attr('src'); 

      var category_id = "1"; 
      var item_id = "99"; 


      var tr = $(this).parent('td').parent('tr').find('td textarea').replaceWith(function() { 
       return $("<p />", '').append($(this).contents()); 
      }); 
     });