JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<div class="container_linhas">
    <div id="linha_1" class="linha" style="padding: 2px">
      <label>Tipo de Provento</label>
      <select style="width: 480px" name="provento_tipo[]">
            <option>Selecione o Tipo de Provento</option>
            <?
                foreach($lista_adicionais_desconto as $valor){ 
            ?>
            <option value="<? echo $valor->idParametro; ?>"><? echo $valor->parametro; ?></option>
            <? } ?>
        </select>
        <select class="input-small" name="provento_formato[]">
            <option value="1">R$</option>
            <option value="2">%</option>
        </select>
        <input type="text" class="input-small" name="provento_valor[]">  

        <button type="button" class="removelinha" id="removelinha" style="display:none"><i class="icon-remove"></i></button>
        <button class="btn btn-small clonarlinha" type="button" id="clonarlinha" style="margin-top: 3px">
            clonar
            <i class="icon-plus-sign"></i>
        </button>                                                  
    </div>
</div>

JavaScript

$(document).ready(function(e) {
    $('.clonarlinha').click(function(e) {
        //exibe botões de remover
        $(this).parent().parent().find('.removelinha').css('display', 'inline-block');

        //clona linha e atribui novo ID incrementando
        console.log($(this).parent());
        
        $(this)
            .parent()
            .clone(true)
            .find('select, input').val('')
            .appendTo( $(this).parent().parent() )
            .attr('id', 'linha_' + $(this).parent().parent().children( ".linha" ).length)
            .find('.removelinha').css('display', 'inline-block');

        //remove botão de clonagem repetido
        $(this).parent().parent().find('.clonarlinha:first').remove();

    });

    $('.removelinha').click(function(e) {
        var container = $(this).parent().parent();

        //se tiver mais de uma linha permite remover
        if ($(container).find('.linha').length > 1) {
            //faz uma cópia do botão clonar
            var btnClonar = $(this).parent().find('.clonarlinha').clone(true);

            //remove a linha
            $(this).parent().remove().after(function(){

                //caso a linha removido contenha o botão clonar, insere o mesmo nvamente
                if ( $(container).find('.clonarlinha').length == 0 ) {
                    $(container).find('.linha:last').append(btnClonar);
                }
                if ($(container).find('.linha').length == 1) {
                    $(container).find('.removelinha').css('display', 'none');
                }
            });

        }
    });
});