i have an issue. How can i clone an existing div with jquery?

[[Image][1](https://i.stack.imgur.com/YGsMF.png)](https://i.stack.imgur.com/YGsMF.png)

```
<div class="modal-body">
    <div class="row">
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Factura</b>
            <input type="number" class="form-control" id="numero"><br/>
        </div>
        <div class="col-md-2 text-center">
            -o-
        </div>
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Remisi&oacute;n</b>
            <input type="number" class="form-control" id="remision"><br/>
        </div>
        <div class="col-md-12">
            <b>NIT:</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="proveedor">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" id="productos" value="1">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
                <i class="fas fa-user-plus" style="color: white"></i>
            </button>
        </div>
    </div>
    <br/>
    <div id="contenido" class="row text-center">
        <div class="col-md-4">
            <b>Producto</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM productos");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="producto">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['id']; ?>"><?php echo $r['descripcion']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-4">
            <b>Cantidad</b>
            <input type="number" class="form-control" id="cantidad"><br/>
        </div>
        <div class="col-md-4">
            <b>Precio</b>
            <input type="number" class="form-control" id="precio"><br/>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>

```

I need to clone the div with id="contenido" when someone press the button with class="agregar\_producto".

How can i solve it?
[[Example][2](https://i.stack.imgur.com/CHlSF.png)](https://i.stack.imgur.com/CHlSF.png)

Is it possible? i need only an example to solve my problem.
Thx you! <3

EDIT: If a clone this inputs how can i change ids/class to this inputs?