Как я могу использовать jquery для добавления div для меня, который также включает в себя все его вложенные div?

Question

Когда пользователь создает продукт, я хочу, чтобы этот продукт транслировался всем остальным пользователям и динамически добавлялся на их экраны. Пока вещательный аспект работает потрясающе.

Но как я могу легко добавить этот класс '.product', а также все вложенные элементы div? На данный момент я могу думать только о том, чтобы скопировать и вставить все его элементы div в переменную jquery и добавить их таким образом - должен быть более простой способ.

Вот где продукты впервые загружаются при загрузке страницы

<div class="product" id="{{$product->id}}">
                            <div class="product-image"><img src="/imgs/products/{{$product->type_id}}.png"></div>
                            <div class="product-content">
                                <div class="product-title" id="product-title">
                                    {{ strtoupper(\App\ProductType::where('id', $product->type_id)->first()->name)}}
                                </div>
                                <div class="product-price">PRICE PER UNIT: <div class="price-value" id="price">{{$product->price}}</div> EXENS</div>
                                <br/>
                                QUANTITY: <div class="quantity-value" id="quantity">{{$product->quantity_available}}</div>
                                @if(strpos(\App\Group::where('id', $player->group_id)->first()->options, "\"showName\":true") !== false)
                                    <br/>
                                    SELLER: <div class="seller" id="seller">{{\App\User::where('id',$product->seller_id)->first()->name}}</div>
                                @endif
                                <br/>
                                PRICE: <div class="total-price" id="total-price">{{$product->price * $product->quantity_available}}</div>
                                <form class="buy-product-form"  action="/UoE/buy-product/{{$product->id}}" method="POST">
                                    {{csrf_field()}}
                                    <button class="pull-right btn btn-primary">BUY NOW</button>
                                </form>
                            </div>
                     </div>

Когда событие получено единственным способом, я могу представить его следующим образом:

var productToAdd="<div class='buy-product-form'><div id='price'></div> " +
                    "" +
                    "" + //insert a massive string here containing all the other aforementioned sub-divs
                    "" + //And populate with json data
                    "" +
                    "</div>";

                $('.content').append(productToAdd);