<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block">
<div class="block__title">Заголовок 1</div>
<div class="block__content">Контент 1</div>
<button class="block__button">Кнопка 1</и>
</div>
<div class="block">
<div class="block__title">Заголовок 2</div>
<div class="block__content">Контент 2</div>
<button class="block__button">Кнопка 2</и>
</div>
<div class="block">
<div class="block__title">Заголовок 3</div>
<div class="block__content">Контент 3</div>
<button class="block__button">Кнопка 3</и>
</div>
<div class="block">
<div class="block__title">Заголовок 4</div>
<div class="block__content">Контент 4</div>
<button class="block__button">Кнопка 4</и>
</div>
<form action="" class="form">
<div class="form__title">Заголовок формы</div>
<input type="text" id="target" value="">
</form>
</body>
</html>.block{
display: flex;
gap: 20px;
}
.form{
padding: 40px 0 0 0
}
.form__title{
margin: 0 0 10px 0
}
$('.block').each(function(){
var $this = $(this)
var title = $this.find('.block__title').text()
var content = $this.find('.block__content').text()
var button = $this.find('.block__button')
var arr = []
button.on('click', function(){
arr = []
arr.push(title,content)
$('#target').attr('value', arr)
$('.form__title').text(title)
})
})
External CSS
This Pen doesn't use any external CSS resources.