行追加したtextareaから文字を取得し表示したいです。

Question

前提・実現したいこと

行追加で新しくできたtextareaの文字を取得して表示したいのですができません。
二つ実装し、片方はできたのですがもう一つの方を同じようにコードを書いたのに動かなくて困っています。
inputの方はうまくできましたがqueの方はうまくいきません。

該当のソースコード

<div class="step2">
            <h2 class="step2-top">STEP2：気分を理解しましょう<br>一言で表現してみましょう</h2>
            <div class="step2-container">
                <div class="step2-image">
                    <img src="img/feeling_table.png" alt="">
                </div>
                <div class="answer" id="answer">
                    <textarea name="text" id="input1" cols="40" rows="3" placeholder="上図の「気分の一覧表」の中から気分を設定し、その程度を選択"></textarea>
                    <select name="select" id="sel2">
                        <option value="0">選択してください</option>
                            <option value="1">0</option>
                            <option value="2">25</option>
                            <option value="3">50</option>
                            <option value="4">75</option>
                            <option value="4">100</option>
                    </select>
                    <textarea name="text" id="input2" cols="40" rows="3" placeholder="上図に存在しない気分があれば入力"></textarea>
                    <select name="select" id="sel3">
                        <option value="0">選択してください</option>
                            <option value="1">0</option>
                            <option value="2">25</option>
                            <option value="3">50</option>
                            <option value="4">75</option>
                            <option value="4">100</option>
                    </select>
                </div>
                <input type="button" id="btn1" value="行追加">
            </div>
        </div>
        <div class="step3">
            <h2 class="step3-top">STEP3：自動思考を見つけましょう</h2>
            <div class="step3-container">
                <p>自分自身に対して、次のような質問をしてみましょう；<br>
                    「その時どんなことが頭に浮かびましたか？」<br>・考え・イメージ・記憶<br>
                    「どんなことが心配になりましたか？」<br>・自分のこと・誰か他の人のこと・今後のなりゆき
                </p>
                <div class="answer" id="answer2">
                    <textarea name="text" id="que1" cols="40" rows="3" placeholder="上記で考えたことを記入"></textarea>
                </div>
                <input type="button" id="btn2" value="行追加">
            </div>
        </div>
<p id="fee">STEP2：<br><span id="final-answer2-1"></span><br><span id="final-answer2-2"></span></p>
                <p id="que">STEP3：<br><span id="final-answer3-1"></span></p>


var idx=2
var idy=1
$(function(){
    $('#input1').change(function(){
        var str2 = $('#input1').val();
        $('#final-answer2-1').text(str2);
    });
    $('#input2').change(function(){
        var str3 = $('#input2').val();
        $('#final-answer2-2').text(str3);
    });
    $('#btn1').click(function(event){
      $('#answer').append('<textarea name="text" id="input'+(++idx)+'" cols="40" rows="3" placeholder="上図に存在しない気分があれば入力"></textarea>','<select name="select" id="sel2"><option value="0">選択してください</option><option value="1">0</option><option value="2">25</option><option value="3">50</option><option value="4">75</option><option value="4">100</option></select>');
      $('#fee').append('<br><span id="final-answer2-'+idx+'"></span>')
    });
    $('#input'+idx).change(function(){
        var str3 = $('#input'+idx).val();
        $('#final-answer2-'+idx).text(str3);
    });
});
$(function(){
    $('#que1').change(function(){
        var str3 = $('#que1').val();
        $('#final-answer3-1').text(str3);
    });
    $('#btn2').click(function(){
      $('#answer2').append('<textarea name="text" id="que'+(++idy)+'" cols="40" rows="3" placeholder="上記で考えたことを記入"></textarea>');
      $('#que').append('<br><span id="final-answer3-'+idy+'"></span>')
    });
    $('#que'+idy).change(function(){
        var str3=$('#que'+idy).val();
        $('#final-answer3-'+idy).text(str3);
    });
    $('#que'+idy).change(function(){
        var str3 = $('#que'+idy).val();
        $('#final-answer3-'+idy).text(str3);
    });
});

どなたか回答頂けると非常に嬉しいです。

Comments

[m.ts10806]

コードブロックはファイルごとにわけてください。
あと「できません」「うまくいきません」ではなく、現状のコードで起きている現象を具体的に記載してください（あと、デバッグしてください）

Answer 1

うーん
恐らくですが
これはinput que 共に出来ていないですね
inputの方も、input3あたりからできなのではと思います。
なるべく質問者様のコードを崩さずに書くと、、、

var idx=2
var idy=1

$(function(){
  $(".step2").on("change",'textarea[id^="input"]',function(){
    var str = $(this).val();
    $(`#final-answer2-${$(this).attr("id").replace("input","")}`).text(str);
  });
  $('#btn1').click(function(event){
    $('#answer').append('<textarea name="text" id="input'+(++idx)+'" cols="40" rows="3" placeholder="上図に存在しない気分があれば入力"></textarea>','<select name="select" id="sel2"><option value="0">選択してください</option><option value="1">0</option><option value="2">25</option><option value="3">50</option><option value="4">75</option><option value="4">100</option></select>');
    $('#fee').append('<br><span id="final-answer2-'+idx+'"></span>')
  });
});

$(function(){
  $(".step3").on("change",'textarea[id^="que"]',function(){
    var str = $(this).val();
    $(`#final-answer3-${$(this).attr("id").replace("que","")}`).text(str);
  });
  $('#btn2').click(function(){
    $('#answer2').append('<textarea name="text" id="que'+(++idy)+'" cols="40" rows="3" placeholder="上記で考えたことを記入"></textarea>');
    $('#que').append('<br><span id="final-answer3-'+idy+'"></span>')
  });
});

一応、こちらの環境では動作確認済みです。
如何でしょうか？

Comments

[urabele]

動作確認できました。
素早いご対応、心遣い
本当にありがとうございます。

[tomtomtomtom]

無事解決できてよかったです^^
また機会がありましたら宜しくお願い致します^^