Icon not always updating - JS/HTML/AMPScript

Question

I have a site set up (via Marketing Cloud/ExactTarget) with tabs broken up into three weeks (Week 1 - 3) then weekdays (click on Week 1 tab then click on a day tab from Mon - Fri). Within each day is a list of prospects selected by the sales rep on another screen that they are going to visit on that week/day. No problem so far. However, in each row listing the prospect, I have a 'Notes' input box that is disabled by default and can only be enabled by clicking on the pencil icon next to it which will then change to a save icon. The rep fills out the notes and then clicks on the save icon to save the notes to the database in which case the save icon reverts back to the edit icon and the notes field is disabled again.

This works perfectly fine on 'Week 1'. However, on Week 2 and 3, clicking on the edit icon doesn't change it to the save icon nor enables the input field. However, the console.log IS showing that icon has changed to the save icon and the input field has been enabled (checked via innerHTML log). This is not a case of a duplicated Id or something like that as far as I can tell and there aren't any errors appearing. I can't figure out what is going on!

Here is the relevant code. Apologies as the code is probably a mess because I've been testing things out to see if I can find a fix.

Week 1 HTML:

 <button id='%%=v(@hcp_notes_uniqueid)=%%' name='editnotes_button' type='button' style="float: left" value='%%=v(@hcp_notes_uniqueid)=%%' onclick='this.innerHTML =="&#9998;"?edit_notes(this.id):this.form.submit()'>&#9998;</button>
      <div style="overflow: hidden; padding-right: .5em;">
     <input id='%%[output(concat(@hcp_notes_uniqueid,"_notes"))]%%' name='editnotes' size='100' maxlength='100' %%=v(@disabled_addnotes)=%% value='%%[output(lookup("bp_hcp_notes","hcp_notes","uniqueid",@hcp_notes_uniqueid))]%%'>
        </div>

Week 2 HTML

<button id='%%=v(@hcp_notes_uniqueid)=%%' name='editnotes_button' type='button' style="float: left" value='%%=v(@hcp_notes_uniqueid)=%%' onclick='this.innerHTML =="&#9998;"?edit_notes(this.id):this.form.submit()'>&#9998;</button>
      <div style="overflow: hidden; padding-right: .5em;">
     <input id='%%[output(concat(@hcp_notes_uniqueid,"_notes"))]%%' name='editnotes' size='100' maxlength='100' %%=v(@disabled_addnotes)=%% value='%%[output(lookup("bp_hcp_notes","hcp_notes","uniqueid",@hcp_notes_uniqueid))]%%'>
        </div>

JS

 function edit_notes(id){
  console.log('edit_notes fired: '+id);
  let notes_id = document.getElementById(id+'_notes');
   console.log('edit_notes notes_id: '+notes_id.id);
  if(notes_id.disabled==true){
 notes_id.disabled='';
    this.innerHTML = '\u{1F4BE}';
    document.getElementById(id).innerHTML='\u{1F4BE}';
    console.log('edit_notes enabled: '+ notes_id.disabled);
         console.log('edit_notes icon: '+ this.innerHTML);
       console.log('edit_notes edit icon clicked save icon activated');
         }
  else{
   notes_id.disabled='disabled';
         this.innerHTML = '\u{270E}';
         document.getElementById(id).innerHTML='\u{270E}';
  
    console.log('edit_notes disabled: '+ notes_id.disabled);
     console.log('edit_notes icon: '+ this.innerHTML);
    console.log('edit_notes save icon clicked edit icon activated submit');
//    document.getElementById('week1form').submit(); TEMP REMOVED
    

  }
}

I'm expecting the click to change the edit icon to a save icon. Week 1 works, but Week 2 or Week 3 despite showing up correctly in the browser console, does not update the page itself though they all have the same code.