Проблемы с кнопкой «Сохранить / Изменить» с использованием JQuery?

Question

Я создаю ежедневник для класса (см. Изображение ниже), и мне сложно добавить кнопку редактирования / сохранения. Я бы хотел, чтобы он изначально читал «редактировать», и после его нажатия пользователь должен иметь возможность редактировать средние строки (которые в настоящее время читают «запись»). Я хотел бы использовать jQuery.

Пока это работает только для первой строки, и я не могу понять, как заставить его работать и для остальных строк. Я также хотел бы, чтобы после того, как пользователь нажал кнопку редактирования, столбец, который он будет редактировать, был окаймлен. Кто-нибудь может помочь?

This is how my HTML is styled. I cant fit all of it but there are 8 rows, listed alphabetically (a-i, named col-a1,col-a2,col-a3, col-b1, col-b2, col-b3 and so on)

  9:00   изменить   10:00   редактировать  

А вот мой JQuery:

$(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');
    }
})
});

Answer 1

$(function(){
$(document).on('click','.edit_btn' , function(){
    let editable = $(this).prev('.edit_cont').attr('contenteditable');
    if(editable){
        $(this).text('edit');
        $(this).prev('.edit_cont').removeAttr('contenteditable');
        $(this).prev('.edit_cont').removeClass('edit_cont_border');
     }
      else{
        $(this).text('save');
        $(this).prev('.edit_cont').attr('contenteditable','true');
        $(this).prev('.edit_cont').addClass('edit_cont_border');
    }
})
});

.edit_cont_border{
  border:1px solid black;
}

<div class = "container">
        <div class = "row my-row">
            <div class = "col my-col col-a1"> 9am </div>
            <div class = "col my-col col-a2 edit_cont" > </div>
            <div class = "col my-col col-a3 edit_btn"> edit </div>
        </div>
        <div class = "row my-row">
            <div class = "col my-col col-b1"> 10am </div>
            <div class = "col my-col col-b2 edit_cont">  </div>
            <div class = "col my-col col-b3 edit_btn"> edit </div>
        </div>
</div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>