JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

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;

}

JavaScript

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

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



/*-- Uma outra maneira que tentei fazer, mas gostaria de usar as tags do Name por tarem correspondendo uma com a outra, nesse exemplo é usando o #ID ----/

var soma = 0;

$('#clone'+soma+'').on('click', function() { 
$('#clone'+soma+'').keyup(function() {
    $('#clonec'+soma+'').val($('#clone'+soma+'').val());
});
});  

*/

$('#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);
}