Html textarea changing the value of a encoded javascript string

Question

I'm working on this Encryption Cipher using CryptoJS for people who want to encrypt their messages. Unfortunately, I've run into a problem decrypting any messages that is encrypted using "NoPadding" padding. After hours and hours of testing the program for bugs, I finally found out what the problem was. I turns out that, when I append the encrypted javascript string into the HTML textarea, it changed the value of the string. Therefore, when I tried to decrypt the value from the textarea, it didn't work.

    <textarea id="textarea"></textarea>
    <button onclick="encrypting_without_textarea()">encrypting without textarea</button>
    <button onclick="encrypting_with_textarea()">encrypting with textarea</button>

HTML

    function encrypting_without_textarea(){
        var textarea_element = document.getElementById("textarea");

        var encryptionKey = "fkjasdlfkdsanfknlasknflsjkanflnasjkfnjknskjnfnlsnf";
        var key  = CryptoJS.enc.Hex.stringify(encryptionKey);
        var value = "Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in more than one way. An example from below in the section of figure/ground.";
        var paddingObject = CryptoJS.pad.NoPadding;
        var encrypted = CryptoJS.AES.encrypt(value, key, {mode:CryptoJS.mode.ECB, padding:paddingObject});

        var decrypted = CryptoJS.AES.decrypt(encrypted, key, {mode:CryptoJS.mode.ECB, padding:paddingObject});
        var msg = decrypted.toString(CryptoJS.enc.Utf8);
        alert(msg); 
    } 

The one above is decrypted straight from the encrypted message and it works, and the one below is decrypted with the value from from the textarea but it returns an error.

             function encrypting_with_textarea(){
                var textarea_element = document.getElementById("textarea");

                var encryptionKey = "fkjasdlfkdsanfknlasknflsjkanflnasjkfnjknskjnfnlsnf";
                var key  = CryptoJS.enc.Hex.stringify(encryptionKey);
                var value = "Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in more than one way. An example from below in the section of figure/ground.";
                var paddingObject = CryptoJS.pad.NoPadding;
                var encrypted = CryptoJS.AES.encrypt(value, key, {mode:CryptoJS.mode.ECB, padding:paddingObject});
                textarea_element.value = encrypted;

                var decrypted = CryptoJS.AES.decrypt(textarea_element.value, key, {mode:CryptoJS.mode.ECB, padding:paddingObject});
                var msg = decrypted.toString(CryptoJS.enc.Utf8);
                alert(msg); 
                //Error: Malformed UTF-8 data
            } 

Here is the plnkr link. I understand that the value append to the textarea has change, but how? And, how do I change/encode the string so that the code can be display in the textarea and copy so that the message can be paste/decode with out it being corrupted. I'm open to any solutions, simpler the better?