Как из вэб-формы с помощью jqery вывести данные по кнопкe submit на ту же страницу + чтобы по повторному нажатию все корректно работало
друзья, я столкнулся с такой проблемой, (вернее с тысячью проблем, но большую часть из них решил) значит из вэб-формы нужно вывести данные на ту же страницу с помощью jquery в тэги c фоном этих выведенных данных и при повторном нажатии кнопки submit должно все корректно отображаться, типа должен создаваться еще один блок , который будет корректно отображаться с первым и т.д. в общем вот картинки как должно быть в исходном положении и какой должен быть результат
я разобрался как выводить данные из вэб формы по нажатию кнопки, как их вставлять в нужные мне места по дом модэли, но весь мой код ломается при повторном нажатии кнопки и я честно не понимаю как это исправить, хоть и потратил на это 10+ часов, в обучающих роликах на ютубе показано чаще всего как один раз нажать на кнопку и все чудесно отображается, но у меня задача по сложнее, типа они при повторном нажатии слипаются и ну и по самому html документу добавляются не так как нужно в общем вот мой код:
html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Безумным можно через стены</title>
<link rel="stylesheet" type="text/css" href="jopastyle.css">
<script src="jquery-3.6.1.min.js"></script>
<script src="jopajs.js"></script>
</head>
<body>
<div id=centeral-container>
<div class="fixed-container">
<div id="left-column">
<h2>Cписок дел:</h2>
<div id="spisok-del">список пуст...</div>
</div>
<div id="right-column">
<h2>Добавить новое дело</h2>
<div id="right-column-options">
<form id="fullForm" name="test" method="post">
<div id="signatures">* Название</div>
<input id="lineOne" name="" type="text" size="30">
<div class="signatures">* Описание</div>
<textarea id="lineTwo" name="" cols="60" rows="10"></textarea>
<input id="knopka" type="submit" value="Добавить дело">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
а вот js:
$(function(){
$(':submit').click(function(event){
event.preventDefault();
var lineOne = $('input').val();
var lineTwo = $('textarea').val();
$('#spisok-del').remove();
var newBackground = $('<div></div>');
$('#left-column').append(newBackground);
$('#left-column div').attr('id', 'background');
var newElement1 = $('<div></div>');
newElement1.text(lineOne);
$('#background').append(newElement1);
$('#background div').attr('id', 'style1');
var newElement2 = $('<div></div>');
newElement2.text(lineTwo);
$('#background').append(newElement2);
$('#background div').attr('id', 'style2');
});
});
css если надо:
html, body {
margin: 0;
padding: 0;
min-width: 1000px;
font-family: Arial;
background-color: #f9f9f9;
}
#central-container {
padding-top: 20px;
}
.fixed-container {
height: 620px;
width: 960px;
margin: 0 auto;
position: relative;
}
#left-column {
width: 470px;
float: left;
padding-right: 10px;
}
#right-column {
width: 470px;
float: right;
padding-left: 10px
}
h2 {
margin-top: 50px;
}
#right-column-options {
padding: 40px 40px;
height: 400px;
width: 470px;
background-color: #FFFFFF;
}
#style1 {
font-size: 16px;
}
#style2 {
margin-bottom: 20px;
font-size: 16px;
color: #91919f;
}
#background {
padding: 15px;
background-color: #FFFFFF;
height: 150px;
width: 470px;
margin-bottom: 20px;
}
.signatures {
margin-top: 20px;
color: #91919f;
font-size: 14px;
margin-bottom: 5px;
}
#signatures {
font-size: 14px;
margin-top: 0px;
color: #91919f;
margin-bottom: 5px;
}
#knopka {
margin-top: 20px;
background-color: #349bed;
color: white;
border: 0px;
width: 175px;
height: 40px;
}
#spisok-del {
margin-top: 56px;
color: #91919f;
font-size: 14px;
}
а вот как это наглядно у меня вышло вместо требуемого результата:
я конечно же наперед вижу в нем ошибки, они детские тупые + есть говнокод, но я тупо не понимаю как сделать это все правильно, потратив день у меня просто мозг вскипел и я уже ниче не понимаю друзья честно, помогите как сделать это задание, я обещаю разобраться в вашем коде и запомнить на всю жизнь, честно говорю