[html]<style>
.sales h2, .sales h1 {
    margin: 0px;
    font-size: 15px;
    font-family: 'Owen Pro Medium'!important;
}

.sales {
    font-family: var(--font-title);
    display: inline-flex;
    flex-direction: column;
align-items: center;}
      .art {
    display: inline-flex;
    border-radius: 12px;
    border: 1px solid black;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
     width: 200px; }
     
      .take {
        background-color: yellow;
      }
     
      .forsale {
display: flex;
    flex-wrap: wrap;
    width: 600px;
    gap: 7px;
    justify-content: center;
}
     
      .takeit {
        margin-top: 20px;
        border: 1px solid black;
        padding: 10px;
      width:400px;}
    </style>
<div class="sales">
<h1>Выберите товары</h1>
<div class="forsale">
<div class="art">
<h2>арт1</h2>
<img src='https://forumstatic.ru/files/001b/f2/e1/94481.png?v=1'><br>
описание Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>Цена: <span class="price">1000</span> руб.</span>
</div>
<div class="art">
<h2>арт2</h2>
<img src='https://forumstatic.ru/files/001b/f2/e1/94481.png?v=1'><br>
описание Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>Цена: <span class="price">1000</span> руб.</span>
</div>
<div class="art">
<h2>арт3</h2>
<img src='https://forumstatic.ru/files/001b/f2/e1/94481.png?v=1'><br>
описание Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>Цена: <span class="price">1000</span> руб.</span>
</div>
<div class="art">
<h2>арт4</h2>
<img src='https://forumstatic.ru/files/001b/f2/e1/94481.png?v=1'><br>
описание Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>Цена: <span class="price">1000</span> руб.</span>
</div>
<div class="art">
<h2>арт5</h2>
<img src='https://forumstatic.ru/files/001b/f2/e1/94481.png?v=1'><br>
описание Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>Цена: <span class="price">1000</span> руб.</span>
</div>
<div class="art">
<h2>арт6</h2>
<img src='https://forumstatic.ru/files/001b/f2/e1/94481.png?v=1'><br>
описание Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span>Цена: <span class="price">1000</span> руб.</span>
</div>
</div>
<button class="reset-btn">Сбросить выбор</button>
<h1>Ваша покупка:</h1>
<div class="takeit"></div>
<button class="copy-btn">Копировать заказ</button>
</div>

<script>
$(document).ready(function() {
  var selectedItems = []; // массив выбранных элементов
  var totalPrice = 0; // общая цена выбранных элементов
 
  // функция обновления текста заказа
  function updateOrderText() {
    var orderText = "Оформлен заказ на ";
    var itemNames = [];
    for (var i = 0; i < selectedItems.length; i++) {
      itemNames.push(selectedItems[i].find("h2").text());
    }
    orderText += itemNames.join(", ") + " с общей суммой " + totalPrice + " руб.";
    $(".takeit").html(orderText);
  }
 
  // функция обновления общей цены
  function updateTotalPrice() {
    totalPrice = 0;
    for (var i = 0; i < selectedItems.length; i++) {
      var price = parseInt(selectedItems[i].find(".price").text());
      totalPrice += price;
    }
  }
 
  // обработчик клика на элемент art
  $(".art").click(function() {
    var isSelected = $(this).hasClass("take"); // проверяем, выбран ли элемент
    if (isSelected) {
      $(this).removeClass("take"); // если выбран, удаляем класс take
      var index = selectedItems.indexOf($(this)); // находим индекс элемента в массиве выбранных элементов
      selectedItems.splice(index, 1); // удаляем элемент из массива выбранных элементов
    } else {
      $(this).addClass("take"); // если не выбран, добавляем класс take
      selectedItems.push($(this)); // добавляем элемент в массив выбранных элементов
    }
    updateTotalPrice(); // обновляем общую цену
    updateOrderText(); // обновляем текст заказа
  });
 
  // обработчик клика на кнопку копирования
  $(".copy-btn").click(function() {
    var orderText = $(".takeit").text();
    var tempInput = $("<input>").val(orderText).appendTo("body").select();
    document.execCommand("copy");
    tempInput.remove();
    alert("Текст заказа скопирован в буфер обмена!");
  });
 
  // обработчик клика на кнопку сброса выбора
  $(".reset-btn").click(function() {
    selectedItems = []; // обнуляем массив выбранных элементов
    totalPrice = 0; // обнуляем общую цену
    $(".art").removeClass("take"); // удаляем класс take у всех элементов art
    updateOrderText(); // обновляем текст заказа
  });
});
</script>[/html]