How to stop same timeout function to override each other CSS

Question

I am using 2 functions that are different in functionality but have same timeout timings. The reason I have timeout is I want to wait for DOM/virtual to load/refresh then I can put on the classes but the function that runs in last overrides. How can I make it so the function doesn't conflict

function one(){
 setTimeout(()=>{
        if(message.innerText.includes("D"){
            message.classList.add("green");
      }else if(message.innerText.includes("U")){
          message.children[0].classList.add("red");
      }
}, 5000)
}

and other function

 setTimeout(()=>{
     const item = captions.replace(/\D/g, "");
       if(item <= 20){
         item.classList.add("amber");
         }else if(itemCaptionsCount >= 20){
         item.classList.add("green");
         }
   })
 },5000) 
}

and I call them like the following but when one() is run it is fine but when two() is run it overrides the classes which has red from function one

one()
two()

How can I make sure both don't conflict?

For the sake of this question I have made the code very short as it as loop