Клонировать несколько входов Javascript

Может ли кто-нибудь помочь мне с этим JavaScript? Я пытаюсь клонировать несколько разных входов. Ввод/вывод платежа Я хочу клонировать независимо, когда нажимается добавленная кнопка. Дом берет на себя выбор и ввод, я хочу клонировать вместе. Я могу получить стандартный ввод для клонирования так, как мне хотелось бы, но также хочу, чтобы поле выбора было клонировано вместе с ним. Также я могу заставить добавленную кнопку правильно выстроиться. Я ужасно разбираюсь в JavaScript, поэтому даже не уверен, что делаю это правильно. Любая помощь приветствуется.

$(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)

Где ваш JavaScript?

— 12.02.2019 22:10

Извините, добавлено в конец кода и в bootply.

— 12.02.2019 22:13

Пожалуйста, скопируйте его сюда, чтобы нам не нужно было получать доступ к ссылке :)

— 12.02.2019 22:14

Это так, я добавил его в конец кода в своем посте. Если прокрутить вниз, то он внизу.

— 12.02.2019 22:20

Идея состоит в том, что вам нужно продублировать всю строку, включая раскрывающийся селектор, а не только поле ввода.

— 12.02.2019 23:40

javascript jquery

12.02.2019 22:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

154

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я получил это, вот мой код, если это поможет кому-то еще.

$(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;
        }
    });

А вот 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>

Загрузите здесь

13.02.2019 19:56