javascript - テーブル値を一度に 1 行ずつ編集する方法

Question

私のテーブルは次のとおりです

<tbody>
<?php foreach($result as $r): ?>
$id=<?php echo $r->content_id; ?>;
<tr id="<?php echo $r->content_id; ?>" class="editable"  >
<td><?php echo $r->content_s_no; ?>  </td>
<td><?php echo $r->content; ?>  </td>
<td><input type="button" value="edit" id='$id' class="edit"/>
<input type="button" value="save" class="save"/>
</td>
</tr>
<?php endforeach; ?>
</tbody> 

使用しているスクリプトは

$(document).ready(function(){
$(".edit").click(function()
{
var ID=$(this).attr('content_id');
alert (ID);
tinymce.init({
    selector: "tr.editable",
    inline: true,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
 $(".save").show();
    $(".edit").hide();
});
});

$(document).ready(function() {
    $(".save").hide();
    $(".edit").show();

});
</script>

私の問題は、ある行の編集ボタンをクリックすると、すべての行の編集ボタンが非表示になり、保存ボタンが表示されることです。クリックしている特定の行編集のみを非表示にする必要があります。私のコードで間違っているステップは何ですか。誰か助けてくださいありがとう。