AppleScript /JS document.getElementsByClassName

I made a script to fill up a textbook in an internal webpage, but devs in my company changed the code so my code below don't work anymore

tell application "Safari" to tell window id theWINID to do JavaScript "document.getElementsByClassName('text-entry')[0].value=" & quoted form of myCaseNote in tab 1

here is the text field code of the page

enter image description here

I try many thing but I can't seems to change the text (in the picture demo "text I need to past")

any help would be very appreciate

<div lobid="##" data="[object Object]" casenotedata="[object Object]" caseid="5sd4sd-sd55sd-5sds5-sds5-sdsd55s" class="css-bzgzwc"><div class="note-input css-1d9ma27" data-cy="note-input"><div class="textarea-container"><div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div></div></div><div class="note-toolbar css-o3el1q" data-cy="note-toolbar"><div class="buttons-container"><button class="add-note-button" type="button">Apply</button></div></div></div>
<div class="note-input css-1d9ma27" data-cy="note-input"><div class="textarea-container"><div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div></div></div>
<div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div>
<div class="textarea-container"><div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div></div>
<div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div>
<div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div>
<textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea>
<div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div>
<span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span>
<div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div>
<div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div>
<div class="textarea-container"><div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div></div>
<div class="note-input css-1d9ma27" data-cy="note-input"><div class="textarea-container"><div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div></div></div>
<div class="note-toolbar css-o3el1q" data-cy="note-toolbar"><div class="buttons-container"><button class="add-note-button" type="button">Apply</button></div></div>
<div lobid="iTunes" data="[object Object]" casenotedata="[object Object]" caseid="bf4ecda0-113e-11ec-944e-9bd3d18184e9" class="css-bzgzwc"><div class="note-input css-1d9ma27" data-cy="note-input"><div class="textarea-container"><div class="form-textarea-container css-9db1eh"><div class="form-textbox"><div class="form-textarea focused"><textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea></div><span id="form-textarea-123_label" class="form-textbox-label" aria-hidden="true">Note</span></div></div></div></div><div class="note-toolbar css-o3el1q" data-cy="note-toolbar"><div class="buttons-container"><button class="add-note-button" type="button">Apply</button></div></div></div>

this work but it's seems that form-textarea-123 is changing all the time (the digits)

tell application "Safari"
    do JavaScript "document.getElementById('form-textarea-123').value = 'demo'" in current tab of window 1
    
end tell

the actual code

<textarea aria-invalid="false" id="form-textarea-123" name="note-input-224" aria-labelledby="form-textarea-123_label" aria-describedby=""></textarea>

This doesn't work neither :

do JavaScript "document.getElementById('form-textarea').innerText;" in current tab of window 1

Here is some example AppleScript code that will get you further along in the process of automating a full solution:

Example AppleScript code:

tell application "Safari"
    tell its current tab of window 1
        
        set foo to do JavaScript "document.getElementsByClassName('form-textbox')[0].innerHTML;"
        
        set targetID to my getID(foo)
        
        do JavaScript "document.getElementById('" & targetID & "').value = 'demo';"
        
    end tell
end tell


--  ## Handler ##

to getID(foo)
    set curTID to AppleScript's text item delimiters
    set AppleScript's text item delimiters to " id="
    set foo to second text item of foo
    set AppleScript's text item delimiters to "\""
    set foo to second text item of foo
    set AppleScript's text item delimiters to curTID
    return foo
end getID


Note: The example AppleScript code is just that and sans any included error handling does not contain any additional error handling as may be appropriate. The onus is upon the user to add any error handling as may be appropriate, needed or wanted. Have a look at the try statement and error statement in the AppleScript Language Guide. See also, Working with Errors. Additionally, the use of the delay command may be necessary between events where appropriate, e.g. delay 0.5, with the value of the delay set appropriately.