克隆多个输入Javascript

Question

Can someone give me a hand with this JavaScript? I am trying to clone multiple different inputs. The Payment In/Out I want to clone independently when the appended button is clicked. The House charges select and input I want to clone together. I am able to get the standard input to clone the way I would like but also want the select box cloned with it. Also I can seem to get the appended button to line up correctly. I am terrible at JavaScript so not even sure that I am going about this the right way. Any help is appreciated.

 $(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls stuff:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); }); 

 .entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="col-md-8 col-md-offset-2"> <legend>Payouts/Payins - Richfield</legend> <!-- Pay Out input--> <div class="form-group line"> <label class="col-md-3 control-label" for="pay_out">Payment Out</label> <div class="col-md-4"> <div class="entry input-group"> <input id="pay_out" name="pay_out[]" class="form-control" placeholder="Total $" type="text"> <span class="input-group-btn">&lt; <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> <!-- press + div --> <div class="row"> <div class="col-md-6 col-md-offset-3"> <small> Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :) </small> </div> </div> <br> <!-- Pay In input--> <div class="form-group line"> <label class="col-md-3 control-label" for="pay_in">Payment In</label> <div class="col-md-4"> <div class="entry input-group"> <input id="pay_in" name="pay_in[]" class="form-control" placeholder="Total $" type="text"> <span class="input-group-btn">&lt; <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> <!-- press + div --> <div class="row"> <div class="col-md-6 col-md-offset-3"> <small> Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :) </small> </div> </div> <br> <legend>House Charges - Richfield</legend> <!-- Dynamic House charges Divider--> <div class="col-md-3 col-md-offset-2 colspace"> <div class="form-group"> <select class="form-control" id="account_selector" name="house_account[]"> <option>Select House Acct</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="col-md-3 colspace"> <div class="form-group"> <div class="controls"> <stuff> <div class="entry input-group"> <input id="house_total" name="house_total[]" class="form-control" placeholder="Total $" type="text"> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </stuff> </div> </div> </div> </div> </div> <div id="push"></div> 

( Bootply )

Answer 1

I got it, here is my code if it helps anyone else.

$(function(){
        $(document).on('click', '.btn-add', function(e) {
            e.preventDefault();
            var parentRow = $(this).closest('.charge-row'),
                cloneRow = cloneChargeRow(parentRow);

            $('.charge-row:last').after(cloneRow);

        }).on('click', '.btn-remove', function(e) {
            $(this).closest('.charge-row').remove();

            e.preventDefault();
            return false;
        });

        function cloneChargeRow(parentRow) {
          // Clear existing add button
          $('.charge-row').find('.btn-add').removeClass('btn-add btn-success').addClass('btn-remove btn-danger');
          $('.charge-row').find('.btn').html('<span class="glyphicon glyphicon-minus"></span>')


          var newRow = parentRow.clone();

          newRow.find('.btn').addClass('btn-add btn-success').removeClass('btn-remove btn-danger');
          newRow.find('.btn').html('<span class="glyphicon glyphicon-plus"></span>');
          newRow.find('select :selected').removeAttr('selected');
          newRow.find('input').val('');

          return newRow;
        }
    });

And here is the html:

        <div class="container">
      <div class="col-md-10">

    <legend>House Charges - Richfield</legend>
        <div class="charge-row row">
          <!-- Dynamic House charges Divider-->
          <div class="col-md-3 col-md-offset-2 colspace">
            <div class="form-group">
              <select class="form-control" id="account_selector" name="house_account[]">
                <option>Select House Acct</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>                        
          </div>

          <div class="col-md-3 colspace">
            <div class="form-group">
              <div class="controls">
                <div class="entry input-group">
                  <input id="house_total" name="house_total[]" class="form-control" placeholder="Total $" type="text">
                  <span class="input-group-btn">
                    <button class="btn btn-success btn-add" type="button">
                      <span class="glyphicon glyphicon-plus"></span>
                    </button>
                  </span>
                </div>
              </div>
            </div>            
          </div>
        </div>
      </div>
    </div>

Bootply Here