Logical problems when adding dynamic fields - Ruby On Rails

I do not understand very well what you are trying to do with the dynamic fields, but I will share with you how I work.

If you use postgres you can use a field like jsonb type. In your migration (in this case projects) would go like this:

class AddColumnCamposToProyecto < ActiveRecord::Migration[5.1]
  def change
    add_column :proyectos, :campos, :jsonb #, null: false, default: {}
    add_index :proyectos, :campos, using: :gin
  end
end

Then to make them dynamically create you can use vue js, I use it with rails 5 and webpack this is my code in vue js to add and remove fields dynamically

this is created in: app / javascript / components / multi-text.vue

<template>
  <div class="multi-text">
  <h5>Campos customizables</h5>
  <p>Hacer click sobre los (label) para editar el nombre de el campo </p>
    <form >
      <div class="form-inputs">  
        <div class="row" v-for="(campo, index) in campos" :key="index">
            <div class="col-sm-2">
              <label v-show = "campo.editable == false" @click = "campo.editable = true"> {{campo.nombre}}</label>
              <input v-show="campo.editable == true"
                type="text"
                placeholder="valor" 
                class="form-control" 
                v-model="campo.nombre"
                v-on:keyup = "sinCaracteresEspeciales($event,campo)"
                v-on:blur= "campo.editable=false;campo.soltoTecla=true"

              />
            </div>
             <div class="col-sm-2 ">
              <input 
                 type="text"
                 placeholder="valor" 
                 class="form-control" 
                 v-model="campo.valor"
              />
            </div>

           <div class="col-sm-2">
              <button
                type="button"
                class="btn-sm btn-danger"
                title = "Quitar"
                @click.prevent="deleteValue(index)"
                v-show="numeroCampos > 1"
                >
              <i class="fa fa-trash"></i>
            </button>
           </div>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <button
              type="button"
              class="btn-sm btn-primary"
              title = "Añadir"
              @click.prevent="addValue"
              >
              <i class="fa fa-plus"></i> 
            </button>
             <button
               type="button"
               class="btn-sm btn-primary"
               title ="Guardar"
               @click.prevent="guardarCambios"
            >
              <i class="fa fa-save"> Guardar</i>
            </button>
          </div>
        </div>
      </div>
    </form> 
      <!--  <pre> {{ $data | json }} </pre>  -->
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    props: ['rutaSaveCampos','camposProyecto'],
    // return empty data until init complete async
    data() {
      return {    
          campos: [{nombre: "(label)", valor: "", editable: false,soltoTecla: false}],
          errors: [],
          resultado: ""
        };
    },
    created(){
      if (this.camposProyecto) {
        const campos_de_proyecto = JSON.parse(this.camposProyecto);
        this.campos = campos_de_proyecto.lista;
      }
    },
    computed: {
      numeroCampos: function(){
        return this.campos.length;
      }
    },
    methods: {
      deleteValue: function(index) {
        this.campos.splice(index, 1);
        //this.$emit('input', this.campos);
      },
      addValue: function() {
        this.campos.push( { nombre: '(label)', valor: '', editable: false, soltoTecla: false} );
        //this.$emit('input', this.campos);
      },
      guardarCambios: function(){
        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        axios.post(this.rutaSaveCampos,{
          dataCampos: this.campos,
          authenticity_token: token
        }).then(response => {
           this.resultado= response.data;
           if (this.resultado == "ok") {
             toastr.success("Campos Guardados"); 
           }

         })
        .catch(e => {
          this.errors.push(e);
          toastr.error(e);
        })
      },
      sinCaracteresEspeciales(event,campo){
        //reemplaza caracters especiales a excepcion de numeros, letras, espacio o ñ y Ñ
        //event.target.value = event.target.value.replace(/[^ña-zA-ÑZ0-9 ]/g, '')
        campo.nombre =event.target.value.replace(/[^ña-zA-ÑZ0-9 ]/g, '')
      }    
    }

  }
</script>

Then if you are using turbolinks 5 with vue you have an adapter in your code located in app / javascript / packs / multi-text.js I would go this

import Vue from 'vue/dist/vue.esm'
import MyComponent from '../app.vue'
import MultiText from '../components/multi_text.vue'

/*
Si quiere tener como acceso global o seteas en la variale windo
window.Vue = Vue;
window.MultiText = MultiText;
*/

    import TurbolinksAdapter from 'vue-turbolinks';
    Vue.use(TurbolinksAdapter)
    document.addEventListener('turbolinks:load', () => {
      var element= document.getElementById("este");
      if (element!=null) {
        var vueapp = new Vue({
          el: element,
          components: { MultiText}
        });
      }
    });

Then in your view you would invoke it like that

 <div id="este">
      <multi-text 
        ruta-save-campos="<%= guardar_campos_proyectos_path(@proyecto) if @proyecto.id.present? %>"
        campos-proyecto= "<%= @proyecto.campos.to_json if @proyecto.campos.present? %>" > 
      <multi-text/> 
    </div>

And finally the controller to save your fields would have a method like this:

def guardar_campos
    data_campos = params[:dataCampos].to_json(:only =>[:nombre, :valor])
    hash_data = Hash.new
    # Añadimos el array de los datos a el hash 
    hash_data = {"lista": JSON.parse(data_campos).to_a}

    if @proyecto.update_attributes(campos: hash_data )
      render json: :ok
    else
      render json: @proyecto.errors
    end
    authorize @proyecto
  end

I hope it helps you.