I have a script that will add tags to another text area :
Code:
function formatText(el_from, el_to, tag) {
    var selectedText = document.selection ? document.selection.createRange().text : el_from.value.substring(el_from.selectionStart, el_from.selectionEnd);
// IE:Moz
    if (selectedText == "") {
        return false;
    }
    var newText='#28\''+tag+'\''+selectedText+'#28\''+tag+'\'';

    el_to.value = el_from.value.substring(0, el_from.selectionStart) + newText + el_from.value.substring(el_from.selectionEnd, el_from.value.length);
}
It does exactly that, but when I make a new selection it over writes the previous changes, no matter where the selection is made. It is called by:

Code:
 <div class="buttons">
             <button type="button" value="D" onclick="formatText(message_text,message,'D')" class="blue" /><img src="images/default.png" />
             <button type="button" value="B" onclick="formatText(message_text,message,'B')" class="blue" /><img src="images/bold.png" />
             <button type="button" value="E" onclick="formatText(message_text,message,'E')" class="blue" /><img src="images/enlarge.png"/>
             <button type="button" value="F" onclick="formatText(message_text,message,'F')" class="blue" /><img src="images/bulb.png"/>
             <button type="button" value="1" name="show_time" class="blue" /><img src="images/clock.png"/>
             <button type="button" value="1" name="show_temp" class="negative" /><img src="images/temp.png"/>
             </div><br>
<br>
<!-- PAGE MESSAGE WYSIWYG -->
 <textarea rows="4" id="message_text" name="message_text" style="direction:ltr;"  onkeyup="copy_data(this);" /><?php echo $page['message_text']; ?></textarea>
 
<!-- PAGE MESSAGE WITH FORMATTING i.e. #28'D' etc -->
          <textarea rows="4" id="message" name="message" disabled style="direction:ltr;" /><?php echo $page['message']; ?></textarea>
And the copying happens with this script:

Code:
function copy_data(val){ 
		var messageText = document.getElementById(val.id).value 
			document.getElementById('message').innerHTML = messageText;
}
SO essentially what needs to happen is when a pice of text is selected in "message_text" :
this is the Selected Text part ...
the top script will add the tags to the bold area as such:

Code:
this is the <whatever>Selected Text<whatever> part
But when I then make a new selection:
this is the selected text part ...
the last <whatever> will dissappear all together and onyl the "part" will now have tags.

Can someone help me get this working correctly, in other words it should now display as:
Code:
this is the<whatever>selected text<whatever><whatever>part<whatever>
Thanks