Problem with JQuery and textarea when loading variable with line break

I'll describe my problem. I have a modal which consists of some inputs and two textarea. It is a data editing modal already inserted in the BD. I load the data to the modal one with a function done in JQuery, everything goes well until I enter jumps of lines in the textareas, in any of the two, when it is like this I load the modal without any data. So I have the code MODAL:

  <div class="row">

      <input type="text" hidden="" id="idpersona" name="">
 <div class="col-sm-4">
      <label>Autos Caratulados</label>
      <input type="text" name="" id="autosu" value="" class="form-control 
input-sm">
  </div>

  <div class="col-sm-4">
      <label>Fecha de Ingreso</label>
      <input type="date" name="" id="fechau" class="form-control input-sm">
  </div>

  <div class="col-sm-4">
      <label>N° de Expediente</label>
      <input type="text" name="" id="expedienteu" class="form-control input-
sm">
  </div>

  <div class="col-sm-4">
      <label>Nombre</label>
      <input type="text" name="" id="nombreu" class="form-control input-sm">
  </div>

  <div class="col-sm-4">
      <label>Apellido</label>
      <input type="text" name="" id="apellidou" class="form-control input-
sm">
  </div>

  <div class="col-sm-4">
      <label>DNI</label>
      <input type="text" name="" id="dniu" class="form-control input-sm">
  </div>



   <div class="col-sm-4">
      <label>Fecha de Nacimiento</label>
      <input type="date" name="" id="fechanu" class="form-control input-sm">
  </div>
<div class="col-sm-4"><label>Estado</label> 
<select name="test" id="estadou" class="form-control form-control-sm" >

<option value="Procesal">Procesal</option>
<option value="Adopcion">Adopción</option>
<option value="Restitucion">Restitución</option>
<option value="Flia Solidaria">Flia Solidaria</option>
</select></div>



</select>

  <div class="col-sm-12"><hr /></div>
<div class="col-sm-6">
      <label>Nombre y Apellido Progenitora</label>
      <input type="text" name="" id="nmadreu" class="form-control input-sm">
  </div>


   <div class="col-sm-4">
      <label>Teléfono</label>
      <input type="text" name="" id="telmadreu" class="form-control input-
 sm">
  </div>


  <div class="col-sm-6">
      <label>Nombre y Apellido Pogenitor</label>
      <input type="text" name="" id="npadreu" class="form-control input-sm">
  </div>
  <div class="col-sm-4">
      <label>Teléfono</label>
      <input type="text" name="" id="telu" class="form-control input-sm">
  </div>

  <div class="col-sm-6">
      <label>Domicilio</label>
      <input type="text" name="" id="domiciliou" class="form-control input-
 sm">
  </div>
<div class="col-sm-12"><hr/></div>


<div class="col-sm-6">
<label>Familia Extensa</label>
<textarea class="form-control"  rows="10"   id="familiaextensau"></textarea>
</div>

 <div class="col-sm-6">
<label>Observaciones</label>
<textarea class="form-control"   rows="10"  id="observacionesu"></textarea>
 </div>

This is how I pass the query data to the JQuery aggregate function from PHP:

            $sql="SELECT id,autos,fecha,expediente,nombre,
             apellido,dni,fechan,estado,nmadre,telmadre,
             npadre,tel,domicilio,familiaextensa,observaciones
                    from t_persona order by fecha asc";
            }
           $result=mysqli_query($conexion,$sql);
            while($ver=mysqli_fetch_row($result)){ 

                $datos=$ver[0]."||".

                       $ver[1]."||".
                       $ver[2]."||".
                       $ver[3]."||".
                       $ver[4]."||".
                       $ver[5]."||".
                       $ver[6]."||".
                       $ver[7]."||".
                       $ver[8]."||".
                       $ver[9]."||".
                       $ver[10]."||".
                       $ver[11]."||".
                       $ver[12]."||".
                       $ver[13]."||".
                        $ver[14]."||".
                          $ver[15]."||"



                       ;

         ?>


            <td>
                <button class="btn btn-warning glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modalEdicion" onclick="agregaform('<?php echo $datos ?>')">

                </button>

and this is the JQuery function:

  function agregaform(datos){

d=datos.split('||');

$('#idpersona').val(d[0]);
$('#autosu').val(d[1]);
$('#fechau').val(d[2]);
$('#expedienteu').val(d[3]);
$('#nombreu').val(d[4]);
$('#apellidou').val(d[5]);
$('#dniu').val(d[6]);
$('#fechanu').val(d[7]);
$('#estadou').val(d[8]);
$('#nmadreu').val(d[9]);
$('#telmadreu').val(d[10]);
$('#npadreu').val(d[11]);
$('#telu').val(d[12]);
$('#domiciliou').val(d[13]);

$('#familiaextensau').val(d[14]);
$('#observacionesu').val(d[15]);


 }

I can not find the error, I read in the .val documentation that is used for inputs, selects and textarea indistinctly and it would have to work, but the problem is with the line breaks that I enter in it. What do you think?