Я работаю над некоторыми внешними формами, используя Bootstrap, jQuery, HTML и серверную часть Django. В какой-то момент в форме пользователь должен добавить информацию «Программное обеспечение», а затем иметь возможность загрузить файл программного обеспечения или использовать URL-адрес своего размещенного файла. Параметр URL позволяет использовать несколько URL-адресов, из которых можно загрузить файл. Существует также возможность добавления нескольких пакетов программного обеспечения, поэтому, если они хотят добавить еще один, есть кнопка «Добавить», которая клонирует группы форм и позволяет пользователю вводить информацию для другого пакета программного обеспечения.

Я не уверен, как сделать это динамическим, когда клонированные данные получат свои собственные значения ключей для использования в бэкэнде, но на данный момент моя самая большая проблема заключается в том, что когда вы нажимаете кнопку Add More Software..., клонированные переключатели влияют только на оригинальные переключатели, и к ним не привязаны события .switchClass() для изменения их внешнего вида. Я не могу на всю жизнь понять, как заставить переключатели быть привязанными к HTML, с которым они клонируются. Я прикрепил jsfiddle для просмотра:

клон jQuery() и переключатели

Мой вопрос заключается в том, как сделать это более динамичным, чтобы кнопки работали с HTML, который клонируется вместе с переключателями, и как настроить динамические группы клонированных форм для захвата значений на бэкэнде?

<div class="software-container">
<div class="form-group">
    <label class="col-sm-2 control-label">
      * Files
    </label>
    <div class="col-sm-9">
      <div class="btn-group" data-toggle="buttons">
        <label id="software-upload-btn" for="software-upload" class="btn btn-default">
          <input id="software-upload" type="radio" name="software-upload" value="upload"> Upload
        </label>
        <label id="software-url-btn" for="software-upload" class="btn btn-default">
          <input id="software-url" type="radio" name="software-url" value="url"> URL
        </label>
      </div>
    </div>
  </div>
  <div id="software-upload-panel" class="hidden">
    <div class="form-group upload-container">
      <div class="col-sm-offset-2 col-sm-9">
        <input type="file" id='software-file' name="software-file" title="" placeholder="No File">
      </div>
    </div>
  </div>

  <div id="software-url-panel" class="hidden">
    <div class="form-group url-container">
      <div class="col-sm-offset-2 col-sm-9">
        <input type="url" id="software-file" name="software-file" class="form-control" placeholder="https://www.example.com/my-software-4.6.tar.gz" title="">
        <button class="close hidden" type="button">x</button>
      </div>
    </div>
    <div class="form-group add-url-container">
      <div class="col-sm-offset-2 col-sm-9">
        <button class="add-url btn btn-default" type="button">
          <i class="glyphicon glyphicon-plus"></i> Add Another URL...
        </button>
      </div>
    </div>
  </div>
</div>

<div class="form-group add-container">
  <label for="add-btn" class="col-sm-2 control-label">
    Add Software:
  </label>

  <div class="col-sm-9">
    <button id="add-software-btn" class="btn btn-default" type="button">
      <i class="glyphicon glyphicon-plus"></i> Add More Software...
    </button>
  </div>
</div>

И мой js:

$(document).ready(function() {
  // Actions for URL/Upload button options
  $('#software-upload-btn').click(function() {
    if ($('.active')) {
      $('#software-upload-btn').switchClass('btn-default', 'btn-info', 0);
      $('#software-upload-panel').removeClass('hidden');
      $('#software-url-btn').switchClass('btn-info', 'btn-default', 0);
      $('#software-url-panel').addClass('hidden');
    }
  });

  $('#software-url-btn').click(function() {
    if ($('.active')) {
      $('#software-url-btn').switchClass('btn-default', 'btn-info', 0);
      $('#software-url-panel').removeClass('hidden');
      $('#software-upload-btn').switchClass('btn-info', 'btn-default', 0);
      $('#software-upload-panel').addClass('hidden');
    }
  });

  // Add button actions
  $(document).on('click', '.add-url:last', function() {
        $('.url-container:first').clone().insertAfter($('.url-container:last'))
            .find('.close').removeClass('hidden');

        $('.close').click(function() {
            $(this).closest('div.url-container').remove();
        });
    });

  $(document).on('click', '#add-software-btn:last', function() {
    $('.software-container:first').clone(true)
      .insertAfter($('.software-container:last'));
  });
});