passing text with break lines to textarea using jQuery

Question

I use this code to create a "fake text area" (content editable div) and some jQuery stuff to fake a placeholder and pass the text to a real textarea:

/*If used as update clear placeholders*/
$( window ).on("load", function(){
    $( document ).find('.feditInput').each( function(){
        if ($(this).html().length > 1) {
            $(this).parent().find(".jqtholder").css("opacity","0");
        }
    }
)});
/*Now the main thing*/
$('.feditInput').on('change keydown keyup',function(){
    if (event.which != '9') {
        $('#'+$(this).attr('foreal')).text($(this).text()) ;
        if ($(this).html() == '' && event.which == '8') {
            $(this).parent().find(".jqtholder").css("opacity","1");
        }
       else {
           $(this).parent().find(".jqtholder").css("opacity","0");
       }
   }
});

.faketextarea
{
    position:relative;
    border: 1px solid #aaa;
    width: 20%;
    padding: 3px 2px;
}
.jqtholder
{
    position:absolute;
    color:gray;
    top:0;
    left:0;
    padding: inherit;
    z-index:-1;
}

.feditInput
{
    width:100%;
    outline:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faketextarea">
    <div class="jqtholder">Subject</div>
    <div class="feditInput" foreal="1" contenteditable></div>
</div><br/>
<div class="faketextarea">
    <div class="jqtholder">Massege</div>
    <div class="feditInput" foreal="2" contenteditable></div>
</div>
<textarea id="1"></textarea>
<textarea id="2"></textarea>

My Problem is: When you use break lines in the fake textarea they dont pass into the real textarea as break lines.

for example if you type: "hi I'm john and
I love coding..."
youll get: "hi i'm john andi love coding..."

I tried playing with different combinations of .text / .html / .val with no success.

If I change this:

$('#'+$(this).attr('foreal')).val($(this).html()) ;

To this:

$('#'+$(this).attr('foreal')).val($(this).html().replace("<div>","").replace("</div>","\n").replace("<br>","\n")) ;

It will work great for the break lines but then add the   for spaces...

This answer doesn't work in this situation for some reason. maybe someone can find out why...