How to send a div via Javascript?

Question

Good evening! I have the following problem: when the user clicks on "Add Cart" the item should appear in payments (as shown in picture 1). How would I send all this div by javascript? Or what is the best solution in this case, since each product in the cart will have a title, a price, an image?

HTML of the complete div:

I would like to "instantiate" this code every time the user adds a new product.

<!-- GRID de cada produto -->
                        <div class="container-fluid" id="modeloProdutos">
                            <div class="row">
                                <!-- descrição produtos + imagem -->
                                <div class="col-sm-12 col-md-4 col-lg-6">
                                    <img src="img/arroz.jpg">
                                    <p id="descricaoProduto">...<p> 
                                    </div>

                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <!-- informar quantidade de produtos -->
                                        <div class="container-fluid divAddProdutosPagamentos">
                                            <div class="row">
                                                <!-- Botão de subtrair -->
                                                <!-- nao consigo redimensionar o botao -->
                                                <div class="input-group-prepend col-lg-3" id="buttonMinus">
                                                    <button class="btn btn-primary" type="button"><i class="fas fa-minus"></i></button>
                                                </div>
                                                <!-- Campo p/ informar a qtd-->
                                                <!-- aqui vai setado a quantidade de itens informado no index -->
                                                <input type="text" class="form-control input-group-prepend col-lg-3 inputQtd" 
                                                value="1">

                                                <!-- Botão de adicionar -->
                                                <div class="input-group-prepend col-lg-3 buttonAdd">
                                                    <button class="btn btn-primary" type="button"><i class="fas fa-plus"></i></button>
                                                </div>
                                            </div>
                                        </div> <!-- FIM DA DIV ADD PRODUTO -->

Template: (. modelProducts is my class that contains all the css style, #bodyPrincipal is my body ID with css style)

    $(document).ready(function(){
    $('#botao').click (function(){
        var _template = $('.modeloProdutos').html();
        $("#bodyPrincipal").append(_template);
    }); 
});

Answer 1

First: since you will want to add the above html every time the user adds a product to the cart, you should create a logic to add an increment, that will be an id -- different, to this attribute: id="modelProducts" (id="modelProducts[n]"), because in Html5, an id of one element equal to another is not allowed within the same page.

<div class="container-fluid" id="modeloProdutos[n]">
                            <div class="row">
                                <!-- descrição produtos + imagem -->
                                <div class="col-sm-12 col-md-4 col-lg-6">
                                    <img src="img/arroz.jpg">
                                    <p id="descricaoProduto[n]">...<p> 
                                    </div>

                                    <div class="col-sm-12 col-md-4 col-lg-2">
                                        <!-- informar quantidade de produtos -->
                                        <div class="container-fluid divAddProdutosPagamentos">
                                            <div class="row">
                                                <!-- Botão de subtrair -->
                                                <!-- nao consigo redimensionar o botao -->
                                                <div class="input-group-prepend col-lg-3" id="buttonMinus">
                                                    <button class="btn btn-primary" type="button"><i class="fas fa-minus"></i></button>
                                                </div>
                                                <!-- Campo p/ informar a qtd-->
                                                <!-- aqui vai setado a quantidade de itens informado no index -->
                                                <input type="text" class="form-control input-group-prepend col-lg-3 inputQtd" 
                                                value="1">

                                                <!-- Botão de adicionar -->
                                                <div class="input-group-prepend col-lg-3 buttonAdd">
                                                    <button class="btn btn-primary" type="button"><i class="fas fa-plus"></i></button>
                                                </div>
                                            </div>
                                        </div> <!-- FIM DA DIV ADD PRODUTO -->

Using Jquery:

<script>

$('button').click(function(ev){

 //Não obrigatório:
 let idButton = $(this).attr('id');

 let _template = $('#modeloProdutos'+idButton).html();

 //Geralmente, uma lista:
 $("elementoQueVocêQuerAdicionarOHtmlAcima").append(_template);
});

</script>