Load dynamic data within javascript

Question

I’m trying to upload dynamic data from the comic book, but it doesn’t show up.

$(function () {
    var divContent = $('#formularioVeiculo');
    var botaoAdicionar = $('a[data-id="1"]');
    var i = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar).click(function () {
        $('<div class="conteudoIndividual"><div id="formularioVeiculo"><div class="row"><div class="col-xs-5"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Veículo</label><select name="veiculo[]" id="" class="form-control"><?php do { ?><option value="<?php echo $row_rsVeiculo['ID_Veiculo']; ?>"><?php echo $row_rsVeiculo['placa']; ?> - <?php echo $row_rsVeiculo['tipo']; ?></option><?php } while ($row_rsVeiculo = mysql_fetch_assoc($rsVeiculo)); ?></select></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Valor</label><input name="veiculoValor[]" type="text" class="form-control" id="" value="" required></div></div><div class="col-xs-5"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div></div></div></div></div>').appendTo(divContent);
        $('#removehidden').remove();
        i++;
        $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioVeiculo').on('click', '.linkRemover', function () {
        $(this).parents('.conteudoIndividual').remove();
        i--;
    });
});

Exile of the RS

<?php do { ?><option value="<?php echo $row_rsVeiculo['ID_Veiculo']; ?>"><?php echo $row_rsVeiculo['placa']; ?> - <?php echo $row_rsVeiculo['tipo']; ?></option><?php } while ($row_rsVeiculo = mysql_fetch_assoc($rsVeiculo)); ?>

Image of the result. The first field appears because already in the form. The other fields are added using the JS above according to the need.

Answer 1

If what you need is more empty lines you can clone one of the lines already on the page and put in HTML. For example:

$(botaoAdicionar).click(function () {
    var clone = $(this).closest('.row').clone();
    $('#formularioVeiculo').append(clone);
});

An adaptation to your code would be like this:

$('#formularioVeiculo').on('click', '.adicionarCampo', function (e) {
    var clone = $(e.target).closest('.row').clone();
    $('#formularioVeiculo').append(clone);

    // adicionar botão para remover
    if (clone.find('a.linkRemover').length) return;
    var remover = clone.find('a.adicionarCampo').clone().removeClass('adicionarCampo btn-success').addClass('linkRemover');
    clone.find('a.adicionarCampo').after(remover);
});
$('#formularioVeiculo').on('click', '.linkRemover', function (e) {
    $(e.target).closest('.row').remove();
});

Notice I took the anchor ID and gave a class adicionarCampo because this element will be cloned and it is not practical to have numbered Ids for elements that have the same functionality.

Example: http://jsfiddle.net/hzcu4or3/