<%= ''.html_safe + " add property" %> <% (@plugin_properties ||= [{}]).each_with_index do |plugin_properties, index| %> <%= fields :plugin_properties do |property| %> <%= property.fields_for "#{index}", plugin_properties do |key_value| %> <% end %> <% end %> <% end %>

Name	Value
<%= key_value.text_field :key, class: 'form-control' %>	<%= key_value.text_field :value, class: 'form-control' %>	<%= ''.html_safe %>

<%= javascript_tag do %> function payment_new_property() { /* Compute max index value to assign new rows with unsued index */ var max_idx = $.map($('[id^=delete_plugin_property_]'), function(e, i) { return e.id.split("delete_plugin_property_")[1] } ).sort(function(a, b) { return b - a })[0]; /* Clone existing row and reset id based on max_idx */ var row = $('#plugin_properties_table tbody>tr:last').clone(true); var row_idx = (parseInt(max_idx) + 1).toString(); row.attr('id', "plugin_property_" + row_idx); row.children("td:last").children('a').attr('id', "delete_plugin_property_" + row_idx); /* update the index and reset value on content */ row.find('td').each(function(){ $(this).contents().each(function(){ if ($(this).attr('name') != undefined){ $(this).attr('name',($(this).attr('name')).replace(max_idx,row_idx)); } $(this).val(''); }); }); /* Attach row into dom */ row.insertAfter('#plugin_properties_table tbody>tr:last'); } function delete_property(obj) { var idx = obj.id.split("delete_plugin_property_")[1]; var rowCount = $('#plugin_properties_table tr').size(); if ( rowCount > 2 ){ $("#plugin_property_" + idx).remove(); } else { $("#plugin_property_" + idx).find('td').each(function(){ $(this).contents().each(function(){ $(this).val(''); }); }); } } <% end %>