Yo usaría un bloque con el atributo contenEditable para ir insertando y eliminando las descripciones. Y al mismo tiempo iría transvasando el contenido del bloque al textarea. Para poder eliminar una descripción, la envolvería en un elemento span con un class/id para poder identificarlo de las demás descripciones
Código Javascript
:
Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<style>
div {
width: 14rem;
height: 9rem;
position: absolute;
top: 6rem;
overflow: hidden;
z-index: -1;
}
</style>
<script>
function addDescripcion(cbox){
var desc = document.getElementById("descGralSolicitud")
desc2 = document.getElementById("descGralSolicitud2");;
if(cbox.checked){
desc2.insertAdjacentHTML('beforeend', '<span class="' + cbox.id + '">' + cbox.nextElementSibling.textContent + '</span>')
}else{
desc2.removeChild(document.querySelector('.'+cbox.id));
}
desc.textContent = desc2.textContent;
}
</script>
</head>
<body>
<form action="">
<input type="checkbox" name="idchk1" id="idchk1" onclick="addDescripcion(this)"> <span id="desc1">Descripción 1</span> <input type="text" name="importe"><br>
<input type="checkbox" name="idchk2" id="idchk2" onclick="addDescripcion(this)"> <span id="desc2">Descripción 2</span> <input type="text" name="importe"><br>
<input type="checkbox" name="idchk3" id="idchk3" onclick="addDescripcion(this)"> <span id="desc3">Descripción 3</span> <input type="text" name="importe"><br>
<input type="checkbox" name="idchk4" id="idchk4" onclick="addDescripcion(this)"> <span id="desc4">Descripción 4</span> <input type="text" name="importe"><br>
<textarea name="nombre" id="descGralSolicitud" cols="30" rows="10"></textarea><br>
<div id="descGralSolicitud2" contentEditable="true"></div>
<input type="submit" value="Enviar">
</form>
</body>
</html>