html - Solution to avoid duplicate css IDs on the same page -

i creating presentation page shows possible cms system messages on same page (errors, notices, etc.). have created php function output whole div of system message in same way cms does, way html output using same css styles of current styling template , result can have 5 different messages on same page, 1 below other.

the problem when these generated php function, div ids repeated , when try validate page of course get:

duplicate id system-message.

one solution go on every line of css , add custom class , use class instead of original ids. like:

#system-message, .system-message-custom {….}  #system-message ul, .system-message-custom ul {….}  #system-message div div p, .system-message-custom div div p {….} 

..but don't find smart because if change cms template 1 has no custom classes added whole thing not work.

this question might funny but, there way like, copy #system-message .system-message-custom , finish ? i've seen sass examples not sure if can done, have never tried sass yet actually.

what ? ignore validation maybe ? idea of using javascript not make me happy. hope understood , have not confused you. help.