Lexor,
что не так?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.arrow:after {
content: "arrow"
}
.work button:first-of-type:after{
content: "button"
}
.work .divDescription{
font: italic 3em;
color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('#ButtonNewWork').click(function () {
let divs = document.createElement("div");
let buttons = document.createElement("button");
let arrow = document.createElement("button");
$(arrow).addClass('arrow');
let Namework = $('#WhatNameWork').val();
let divNamework = document.createElement("div");
$(divNamework).addClass('divNamework');
$(divNamework).append(Namework,buttons,arrow);
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);
$(arrow).click (function() {
$(divDescription).slideToggle();}) ;
});
});
</script>
</head>
<body>
<input type="text" id="WhatNameWork" value="test">
<input type="text" id="Description" value="text">
<input name="" type="button" value="click" id="ButtonNewWork">
<div id="LeftColum"></div>
</body>
</html>