retrieving Regex-able string that includes "\n 8 am but not relative to clicked elem [7:54pm]

[frankcollins3]

heres that string that could have 22.67 / 23 fl oz 8 am

  const handleClick = (index:number) => {

    let containerKids = $(reminderContJQ).children()
    let containerKidsText = containerKids[0].innerText

    const newStatus = [...status];
👍     newStatus[index] = 'aaye';
    setStatus(newStatus);

    // SET_STATUS( {payload: STATUS[index] === 'check'})
    let calc = Math.ceil((HYDRO_INTAKE / HYDRO_SCHEDULE.length) * (index + 1) / HYDRO_INTAKE)
    SET_PROGRESS( {payload: percent / 100 } )
    // SET_PROGRESS( {payload: 100 / HYDRO_SCHEDULE.length / 100 } )
    console.log('percent')
    console.log(percent)    
    // console.log(Math.floor(hydroIntake / hydroSchedule.length) * (index + 1)) / hydroIntake))      
}

https://github.com/frankcollins3/fill_container/assets/73137934/99d12f11-1861-451f-b41c-74d5882691cb

state starts out as '', a successful intake of water according to time specified by pg.table.settings is "check"

this picture captures that successful update of data: which would be adhering to schedule & the needed water intake amount 👍 newStatus[index] = 'check'

first proposed approach: 0: includes the jquery targeting performed.

1: give an id that factors in the .map() index to the "22.6 fl oz 8am" string.

[frankcollins3]

got it:

  const handleClick = (index:number) => {
👍     console.log($(`#timeSpan${index}`))

    let indexTargetSpan = $(`#timeSpan${index}`)[0]
    console.log('indexTargetSpan')
    console.log(indexTargetSpan)
    console.log(indexTargetSpan.innerText)

heres the id on the element that uses string interpolation to assert that particular element's index in the map as ID suffix

        <div className="timeline-text">
          <span
            id={`timeSpan${index}`}
            className="timeline-display"
            style={{ color:  '#00000030'  }} // style={{ color: `${disabled[index] ? '#00000030' : '#000000'}` }}
            >
            {time <= 12 ? time : time - 12} {time < 12 ? 'am' : 'pm'}
          </span>

          {/* {isShown && <div className="timeline-hover"><img src="/water_img/mouse_droplet.png" /></div>} */}
        </div>

[8:01pm]