Вывод data-атрибутов в модальном окне

Универсальное модальное окно с выводом нужных data-атрибутов.

Передача с помощью кнопки 3 data-атрибута:

• название товара или заголовка для модального окна data-nametitle
• изображение товара data-imgtovara
• цену товара data-pricetovar

Кнопка вызова модального окна:

<button type="button" class="btn btn-primary" data-nametitle="Букет «Фруктовый Коктейль»" data-imgtovara="images/buket/2.jpg" data-pricetovar="1700 р." data-toggle="modal" data-target="#exampleModal">
  Заказать
</button>

Разметка модального окна:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Быстрый заказ цветов</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-sm-3 tovarimg"></div>
					<div class="col-sm-9 tovarinfo"></div>
				</div>
				<hr>
				<form>
					<div class="form-group">
						<label for="exampleFormControlInput1">Ваше имя</label>
						<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Например: Иван"> </div>
					<div class="form-group">
						<label for="exampleFormControlInput2">Ваш телефон</label>
						<input type="text" class="form-control" id="exampleFormControlInput2" placeholder="Например: +797757775342"> </div>
					<div class="form-group">
						<label for="exampleFormControlTextarea1">Примечание</label>
						<textarea class="form-control" id="exampleFormControlTextarea1" rows="2" placeholder="Ваш адрес или примечание"></textarea>
					</div>
					<input id="hide1" type="hidden" value="">
					<input id="hide2" type="hidden" value="">
					<button type="submit" class="btn btn-primary w-100">Заказать</button>
				</form>
			</div>
		</div>
	</div>
</div>

Передача данных в блоки с классами через js:

• tovarimg (изображение вместе с html разметкой)
• tovarinfo (название и цену товара с html разметкой)
• скрытые input с id hide1 (передача название) и hide2 (передача цены)

$(function() {
  $(".btn").click(
    function() {
      var imgtovara = $(this).attr('data-imgtovara');
      var nametitle = $(this).attr('data-nametitle');
      var pricetovar = $(this).attr('data-pricetovar');

      //$(".tovarimg").append('<img class="img-fluid" src="' + imgtovara + '" alt="..." />');/*не работало*/
        $(".tovarimg").html('<img class="img-fluid" src="' + imgtovara + '" alt="..." />');
      //$(".tovarinfo").append('<p class="h3">' + nametitle + '</h1>');/*не работало*/
        $(".tovarinfo").html('<p class="h3">' + nametitle + '</h1>');
      //$(".tovarinfo").append('<p><strong>Цена</strong>:' + pricetovar + '</p>');/*проверить*/
        $(".tovarinfo").text('<p><strong>Цена</strong>:' + pricetovar + '</p>');
      $("#hide1").attr('value', nametitle);
      $("#hide2").attr('value', pricetovar);
    })
});