Lexor,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>W</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style type="text/css">
body {
background-color: #f5f5f5;
width: 100%;
height: 100%;
}
#Central
{
position: relative;
width: 1150px;
}
#LeftColum {
margin: 65px 0px 0px 160px;
float: left;
display: inline-block;
}
#RightColum {
margin: 65px 0px 0px 20px;
display: inline-block;
position: absolute;
right: 150px;
}
.WorkHead {
font-weight: normal;
font-size: 21px;
font-family: Arial;}
.work {
position: relative;
width: 340px;
height: 140px;
font-size: 16px;
font-family: Arial;
z-index: 2;
padding-bottom: 20px;
}
.work hr {
border-width: 0.1em;
border-color: #f7f7f7;
}
#work {
width: 390px;
height: 140px;
background-color: #ffffff;
margin-bottom: 20px;
font-size: 16px;
font-family: Arial;
}
#notwork{
font-size: 16px;
position: relative;
top: 30px;
color: grey;
z-index: 1;
}
#NewWork {
width: 470px;
height: 500px;
background-color: #ffffff;
}
#WhatNameWork
{
width: 390px;
height: 48px;
margin-left:40px;
background-color: #fcfcfc;
border: none;
}
.TextAll {
color: #8993ad;
padding-top: 30px;
padding-left: 40px;
font-size: 14px;
font-family: Arial;
}
#Description
{
width: 390px;
height: 230px;
margin-left:40px;
background-color: #fcfcfc;
border: none;
text-align: left;
}
#ButtonNewWork
{
margin-left:40px;
margin-top: 30px;
color: #ffffff;
background-color: black;
width: 220px;
height: 60px;
text-align: center;
font-size: 16px;
border: none;
}
.but {
position: relative;
border:none;
background-color: white;
margin-left: 10px;
z-index: 3;
right: 150px
top: -30px;
}
.but:before {
content: "\f00d";
font-family: FontAwesome;
font-size: 18px;
color: red;
background-color: white;
}
.arrow {
position: relative;
border:none;
background-color: white;
float: right;
z-index: 3;
}
.arrow:before {
content: "\f107";
font-family: FontAwesome;
font-size: 16px;
color: black;
background-color: white;
}
.divNamework {
position: relative;
padding-top: 10px;
width: 320px;
height: 40px;
display: inline-block;
font-size: 16px;
background-color: #ffffff;
z-index: 3;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: grey;
text-align: left;
text-indent: 10px;
}
.divDescription{
position: relative;
color: grey;
font-size: 14px;
background-color: #ffffff;
z-index: 3;
width: 310px;
height: 80px;
padding-top: 10px;
padding-left: 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer>
$(function() {
let divsArray = [];
$('#ButtonNewWork').click(function() {
let divs = document.createElement("div");
let buttons = document.createElement("button");
let arrow = document.createElement("button");
$(arrow).addClass('arrow');
$(buttons).addClass('but');
let Namework = $('#WhatNameWork').val();
let divNamework = document.createElement("div");
$(divNamework).addClass('divNamework');
$(divNamework).append(Namework, buttons, arrow);
//$(Namework).addClass('Namework1');
let Description = $('#Description').val();
let divDescription = document.createElement("div");
$(divDescription).addClass('divDescription');
divDescription.append(Description);
$(divs).addClass("work");
$('#LeftColum').append(divs);
$(divs).append(divNamework, divDescription);
divsArray.push(divs);
$(arrow).click(function() {
$(divDescription).slideToggle();
});
$(buttons).click(function() {
let index = divsArray.findIndex(function(div) {
return div === divs
});
divsArray.splice(index, 1);
$(divs).remove();
});
});
});</script>
</head>
<body>
<div id="Central">
<div id="LeftColum">
<h2 class="WorkHead">Список задач:</h2>
<div id="notwork"> Список пуст...</div>
<!--<div class="work"></div>
<div class="work"></div>-->
</div>
<div id="RightColum">
<h2 class="WorkHead">Новая задача</h2>
<div id="NewWork">
<div class="TextAll">*Название</div>
<input id="WhatNameWork" type="text" name="name">
<div class="TextAll">*Описание</div>
<textarea id='Description' type="text" name=""></textarea>
<button id="ButtonNewWork"> Добавить задачу </button>
</div>
</div>
</div>
</body>
</html>