Unable to reuse reverted property in CSS and JS

Question

Hello everyone 👋
I was working on a project which I suddenly understood that I can't use that CSS property when I revert all styles using JS. I want to know is there a way to make it work? This is a simple code shows you what is happening.
It is going to run the given code, without using <iframe>; but because the output is on the current page, the other styles will be added to it. So I removed all the styles for the element in the output, and the color style is removed too. I see I have no other ways, so I added the color style in JS, to turn it red. But because of removing the styles, I can't use the color property anymore! What do you think and what do you suggest me?
https://code.sololearn.com/W5U9984MX94N/?ref=app

Thanks for reading my problem!

Answer 1

FF9900
Thanks for answering, but my full project is something like that. I've updated the code and question

Answer 2

Thanks FF9900, it seems to be the best way. You know actually I was working on lots of code and output examples, so I used a "for loop" to render the output and remove styles for each child.
Anyway this is a good way too, thanks for sending me answers!