fluentd-ui/app/javascript/packs/nested_settings.js

"use strict";
import "lodash/lodash";
$(document).ready(()=> {
  var $firstSetting = $(".js-nested-column.js-multiple:first");

  if ($firstSetting.length === 0) {
    return;
  }

  var counter = 0;
  $(".js-append", $firstSetting).on("click", function(ev){
    ev.preventDefault();
    var $new = $firstSetting.clone(true);
    counter++;

    var fields = $("input,select,textarea", $new);
    _.each(fields, function(elm){
      elm.name = elm.name.replace("0", counter);
    });
    $("label", $new).each(function(_, label){
      var $label = $(label);
      $label.attr("for", $label.attr("for").replace("0", counter));
    });

    $(".js-remove", $new).show();
    $(".js-append", $new).hide();
    $new.appendTo($firstSetting.parent());
  });

  $(".js-remove").on("click", function(ev){
    ev.preventDefault();
    $(this).closest(".js-nested-column").remove();
  });

  var $allSettings = $(".js-nested-column.js-multiple");
  $(".js-append", $allSettings).hide();
  $(".js-remove", $allSettings).show();
  $(".js-append", $firstSetting).show();
  $(".js-remove", $firstSetting).hide();
});