Mirror inputs with their values

Question

It is possible for jquery to understand the elements of an array value coming from html? ps: I don’t know if it’s right to say that in html you have an array.

I am creating with html and jquery a input which is having the value of the name as if it were an array, adding 1 for each insertion ;

name="nome=[]", name="nome=[1]", name="nome=[2]"...

This is to make it easy for PHP to select the data.

These inputs created are mirrored in another <fieldset>.

I want to mirror the values calling the element by name I got this using the .keyup() jquery, but it works only for the first input, which in theory would be the nome[].

From the way I imagined it, I tried to create a for to call each element of the "array". By the way, the way I thought the selector is only in the nome[].

I set my mind to do it this way that maybe I’m not seeing other ways to solve it. I tried to tbm with a .click on a button, where the values of inputs of the first <fieldset> copy in the values of other inputs <fieldset>, I thought it because they both have the same name.

What would be indicated ?

Study code - Edit#1

In the part of Java Script is commented two ways, one suggested by @Matheus Cuba and a way I did picking up by #ID, but I would like to use the tag name

https://jsfiddle.net/10nkpt2x/5/

Answer 1

Try this Snippet:

Thus, you place a global Rigger on the elements whose attribute name begin with nome (Pun Maravilhoso)

$('input[name^="nome"]').keyup(function() {
  var identificador = $(this).attr('name');
  var valor = $(this).val();
  $('input[name="' + identificador + '"]').val(valor);
});

hr {
  margin: 10px 0;
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Campo 2:<input name="nome=[2]"><br> Campo 2:<input name="nome=[2]"><br> Campo 2:<input name="nome=[2]"><br>
<hr> Campo 4:<input name="nome=[4]"><br>
<hr> Campo 3:<input name="nome=[3]"><br> Campo 3:<input name="nome=[3]"><br> Campo 3:<input name="nome=[3]"><br>

Answer 2

Your problem seems to be delegation. When using $("seletor").keyup, dynamically added elements are not included in the event.

To solve, use:

$(document).on('keyup','input[name^="nome"]', function() {

In this way, the new elements will be heard by the event:

/*-- Essa é a maneira sugerida por @Matheus Cuba ---*/
var soma = 0;

$(document).on('keyup','input[name^="nome"]', function() {
  var identificador = $(this).attr('name');
  var valor = $(this).val();
  $('input[name^="' + identificador + '"]').val(valor);
});

$('#botao').click(function(){
      soma++;
      
      $('<input id="clone'+soma+'" class="f" name="nome=['+soma+']">').appendTo('.box0');
      $('<input id="clonec'+soma+'" class="f" name="nome=['+soma+']">').appendTo('.box');
      
      });

$('#x').click(function(){
  if ( soma > 0 ){
    $('.f:last-of-type').remove();
    
    --soma;
}
    });

contador = function(){
    alert(soma);
}

div {

display: flex;

}

p {

width: 100%;
margin:0 0;
color:grey;

}

#x {

color: lightblue; 

}

#botao {

color:coral;}

#x, #botao {

text-align: center;
font-size: 3em;

}

#botao:hover, #x:hover {

cursor: pointer;

}

h1:hover{

cursor: pointer;

}

.box0, .box {

margin: auto;
color:grey;

}

fieldset {

text-align: center;
width:15em;
border: none;

}

input {

text-align: center;
margin-top: 15px;

}

.cont { 

display: flex;
justify-content: space-around;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><p id="botao">+</p><p id="soma" onclick="contador()">ALERT DA SOMA</p><p id="x">-</p></div>


<div class="cont">

 <fieldset class="box0"><input name="nome=[]" placeholder="nome" id="clone0"></fieldset>
   
     
 <fieldset class="box"><input name="nome=[]" placeholder="espelho" id="clonec0"></fieldset>
        
</div>