Q:

Aumentar Tamanho da fonte JavaScript/HTML/Jquery

eu sei que eu já fiz uma pergunta parecida, mas alguém pode me ajudar com isso, fiz uma aplicação em HTML/JavaScript/Jquery ... e preciso de alterar a fonte de CADA UMA das TEXTAREAS com um botão, dê uma olhada, o usuário clica em adicionar textarea, adiciona também, um botão para alterar a cor e um para aumentar a fonte ... Preciso de adicionar a função de aumentar a fonte em cada uma ...
Se alguém tiver uma ideia ...

 
<head>

    <title>Página</title> <!-- Add page title -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- add Jquery CDN -->

    <link href src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- add bootstrap css CDN -->  

</head>

<body class="corpo">

    <h1><center>Página</center></h1> <!--  -->
        <hr/>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- add Bootstrap CDN -->

    <script
        src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
        integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
        crossorigin="anonymous"></script> <!-- library draggable -->

    <link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->

    <script type="text/javascript"> // all javascript/jquery code start here

    function mover(){
    $('#mover').draggable(); // add draggable library

    };

        function add_field() 
    {

        // ------------------------------------------------------
        var form = document.getElementsByTagName('form')[0],
        input = document.createElement('button');
        input.setAttribute('type', 'button');
        input.setAttribute('onclick',"document.getElementById(" + count + ").style = 'background-color:blue;';");
        input.setAttribute('name', 'item');
        input.setAttribute('class', 'pular');
        form.appendChild(input);

        input = document.createElement('button');
        input.setAttribute('type', 'button');
        input.setAttribute('onclick',"document.getElementById(" + count + ").style = 'background-color:white;';");
        input.setAttribute('name', 'item');
        input.setAttribute('class', 'pular');
        form.appendChild(input);

        input = document.createElement('button');
        input.setAttribute('type', 'button');
        input.setAttribute('name', 'item');
        input.setAttribute('class', 'pular');
        input.setAttribute('id', 'btnaumentar');
        input.setAttribute('onclick', 'obterTamanhoFonte();');
        form.appendChild(input);

        input = document.createElement('textarea');
        input.setAttribute('id', count.toString());
        input.setAttribute('type', 'textarea');
        input.setAttribute('name', 'item');
        input.setAttribute('class', 'caixa_descer');
        form.appendChild(input);

    };

        function info(){
            alert("ATÉ 10 CAIXAS DE TEXTO");

        };

            var count = 0;

         function contador() 
    {

        count++;
        console.log(count); // show count in console

        if(count >= 10){
            $( ".button" ).prop( "disabled", true ); // disable button

        }
    };

    </script>

        <form name="input" method="get" id="mover">
            <div class="ui-input-text">      
                <div data-role="navbar">
                      <button type="button" class="button" onclick="add_field(); contador(); mover();">ADICIONAR CAIXAS DE TEXTO</button><br><br> <!-- Create add button -->
                      <!-- <button onclick="info();">i</button> <br><br> -->
                </div>
            </div>
        </form>

        <button type="button" id="btnAumentar">Aumentar fonte</button>

        <!-- SALVAR -->

        <form name="input" method="get">
            <div class="ui-input-text">      
                <div data-role="navbar">
                      <button type="button" class="btnsave">SALVAR</button><br><br> <!-- Create save button -->
                </div>
            </div>
        </form>

        <div class="mover">
        <br>
            <button onclick="mover();">Click</button>
        </div>

</body>

<script type="text/javascript">

    var $btnaumentar = $("#btnaumentar");
    var $elemento = $("body #mover");

    function obterTamanhoFonte() {
      return parseFloat($elemento.css('font-size'));
    }

    $btnaumentar.on('click', function() {
      $elemento.css('font-size', obterTamanhoFonte() + 1);
    });

</script>

A:

Esse seu código está horrível, não da pra entender nada, como você está usando jQuery podemos melhorar isso criando um template e clonar o mesmo toda vez que o botão de adicionar for clicado, esse template ficara oculto, o código está comentado para você poder entender.

$(document).ready(function(){
  var _clone_index = 0;
  $("#btnAddCaixaTexto").on('click', function(){
    // Vamos usar um número de índice exclusivo para cada nova instância do item clonado
    _clone_index++;
    // Verifica a quantidade de caixa já adicionada
    if (_clone_index <= 10) {
      $(this).parent().parent().after($("#template").clone().attr("id","_clone_" + _clone_index));
      // Tornar o clone visível alterando CSS
      $("#_clone_" + _clone_index).css("display","inline");
      // Altera o atributo id da tag textarea
      $("#_clone_" + _clone_index + " textarea").attr('id', _clone_index);
      
      // Método para alterar o fundo da textarea
      $("#_clone_" + _clone_index).on('click', "#btnFundoAzul", function(){
        // Altera o fundo da textarea para Azul
        $(this).parent().find("textarea").css({"background": "blue"});
      });
      
      // Método para alterar o fundo da textarea
      $("#_clone_" + _clone_index).on('click', "#btnFundoBranco", function(){
        // Altera o fundo da textarea para Branco
        $(this).parent().find("textarea").css({"background": "white"});
      });
      
      // Método para Aumentar a fonte da textarea
      $("#_clone_" + _clone_index).on('click', "#btnAumentarFonte", function(){
        // Armazena o tamanho atual da fonte
        var tamanhoAtual = parseFloat($(this).parent().find("textarea").css("font-size"));
        // Incrementa + 1 no valor atual, e aplica o novo tamanho
        $(this).parent().find("textarea").css({"font-size": tamanhoAtual+1});
      });
    } else {
      // Caso for maior que 10, exibe a mensagem
      // e desabilita o botão
      alert("ATÉ 10 CAIXAS DE TEXTO");
      $(this).prop("disabled", true); // Desabilita o botão #btnAddCaixaTexto
    }
    mover();
  });
  
  function mover(){
    $('#mover').draggable(); // add draggable library
  };
});
/* Oculta a div[id="template"] */
#template {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- add bootstrap css CDN -->
<link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- add Jquery CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- add Bootstrap CDN -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <!-- library draggable -->


  <h1><center>Página</center></h1> <!--  -->
  <hr/>
  <!--
  O código abaixo é apenas uma template
  deve ser colocado fora do formulário
  -->
  <div id="template">
    <button type="button" id="btnFundoAzul" name="item" class="pular">Fundo Azul</button>
    <button type="button" id="btnFundoBranco" name="item" class="pular">Fundo Branco</button>
    <button type="button" id="btnAumentarFonte" class="pular">Aumentar Fonte</button>
    <textarea id="0" type="textarea" name="item" class="caixa_descer"></textarea>
  </div>
  <!-- Fim do template -->
  
  <form name="input" method="get" id="mover">
    <div class="ui-input-text">      
      <div data-role="navbar">
        <button type="button" class="button" id="btnAddCaixaTexto">ADICIONAR CAIXAS DE TEXTO</button><br><br> <!-- Create add button -->
        <!-- <button onclick="info();">i</button> <br><br> -->
      </div>
    </div>
  </form>


  <form name="input" method="get">
    <div class="ui-input-text">      
      <div data-role="navbar">
        <button type="button" class="btnsave">SALVAR</button><br><br> <!-- Create save button -->
      </div>
    </div>
  </form>


  <div class="mover">
    <br>
    <button onclick="mover();">Click</button>
  </div>

