Hey all,
I will try to make it short, and not take too much of your time. I need to create a special functionality in an html document, my feelings tell me JavaScript is the answer, but I would like some confirmation.

I will briefly describe my problem. I have an html document with short paragraphs of color coded text. My goal is to click on any paragraph, which would then be transferred to an editable text area. If its too complicated to move the text with color into this editable area, then it would suffice if its above this textarea in color and in the text area without color (this is the way I depicted in the imaginary screenshot below). If this editable text area is in a popup or lets say on the right side of the screen does not matter. The only button necessary next to the text area is "copy to clipboard" which afaik can currently only be done with the help of flash.

Below you can find the image how I imagine the most simple solution to my problem. Please kindly let me know if this is possible with Javascript, and if its difficult to do. What functions should I look into, can you give me some tips to get me started? I know some html, but in terms of scripting I only know AutoHotKey, no Javascript yet.

Thank you for your time and help! I am willing to learn, but I don't know where to start.