замена нескольких частей с помощью функции замены jQuery3

Question

с помощью data: {'js-item-form' => true} создается форма рельсов для обновления представления с помощью вызова AJAX

<div data-js-item-id=<%= item.id %>>   [...] </div>

контроллер

render partial: 'item', locals: {item: @useritem}

и JS

$(document).ready(function() {
  $('[data-js-item-form]').on("ajax:success", function(event, data, status, xhr){
    var item = $(xhr.responseText).hide();
    $('#items').append(item);
    item.fadeIn(1000);
  });

  $('[data-js-item-id]').on("ajax:success", function(event, data, status, xhr){
    var item_id = xhr.responseJSON.id;
    $('[data-js-item-id=' + item_id + ']').hide();
  });
});

Вопрос касается расширения этих вызовов AJAX на два других элемента

render partial: 'variants', locals: {variants: @products}
render partial: 'suppliers', locals: {suppliers: @suppliers}

с представлениями, по-прежнему ссылающимися на тот же элемент создания / обновления, который должен вызвать изменение с помощью replace вызова Jquery

<span data-js-item-id=<%= item.id %>>
  <%= collection_select(:useritem, :product_id, @products, :id, :name, prompt: 'Select one (mandatory)') %>
</span>

[within a javascript block] data-js-item-id=<%= item.id %> 
  <%=raw @suppliers.to_json %>

Не очень хорошо разбираясь в JS, вопрос разбивается на две трудности:

1. как добавить в javascript коллекцию рельсов, идентифицированную item.id
2. как расширить блок формы js
   $('#items').append(item); item.fadeIn(1000); с заменой функция

Я понимаю, что функция замены имеет дело с коллекцией, тогда как оригинальный вызов обрабатывает член; таким образом, номенклатурные элементы / элементы могут быть очень скользкими ...