使用JQuery保存/编辑按钮问题？

我正在为班级创建一个日程安排（见下图），但我在添加编辑/保存按钮时遇到了困难。我希望它最初读“编辑”，一旦点击，用户应该能够编辑中间的行（当前读“写”）。我想使用jQuery

到目前为止，这只适用于第一行，我不知道如何使它也适用于其余的行。我还希望，一旦用户单击“编辑”按钮，用户将要编辑的列就有边框。有人能帮忙吗？

这就是我的HTML的样式。我不能适应所有这些，但有8行，按字母顺序排列（a-I，命名为col-a1、col-a2、col-a3、col-b1、col-b2、col-b3等等）

$（函数（）{
$（文档）.on（'单击'，'）。编辑函数（）{
let editable=$（this.prev（'.edit_cont'）.attr（'contenteditable'）；
如果（可编辑）{
$（this.text（'edit'）；
$（this）.prev（'.edit_cont'）.removeAttr（'contenteditable'）；
$（this）.prev（'.edit_cont'）.removeClass（'edit_cont_border'）；
}
否则{
$（this.text（'save'）；
$（this）.prev（'.edit_cont'）.attr（'contenteditable'，'true'）；
$（this）.prev（'.edit_cont'）.addClass（'edit_cont_border'）；
}
})
});
。编辑\u cont\u边框{
边框：1px纯黑；
}

上午9点
编辑
上午10点
编辑
$（文档）。在（'click'，'.my row.col-a3'
这里是您仅为
col-a3
添加的单击事件是的，我知道，我在问如何包括所有这些。检查我的答案尼斯！知道如何使可编辑列在单击编辑按钮后在其周围显示边框吗？检查我更新的答案，并将答案作为接受答案。
 <div class = "container">
        <div class = "row my-row">
            <div class = "col my-col col-a1"> 9am </div>
            <div class = "col my-col col-a2" > </div>
            <div class = "col my-col col-a3"> edit </div>
        </div>
        <div class = "row my-row">
            <div class = "col my-col col-b1"> 10am </div>
            <div class = "col my-col col-b2">  </div>
            <div class = "col my-col col-b3"> edit </div>

$(function(){
$(document).on('click','.my-row .col-a3' , function(){
    let editable = $(this).prev('.col-a2').attr('contenteditable');
    if(editable){
        $(this).text('edit');
        $(this).prev('.col-a2').removeAttr('contenteditable');
    
     }
      else{
        $(this).text('save');
        $(this).prev('.col-a2').attr('contenteditable','true');
    }
})
});