jQuery クリックアクションによる項目追加表示させる方法を実現したい

Question

前提・実現したいこと

HTML、CSS、jQueryで質問項目と選択肢を作成する機能を実装したく、
質問項目に対する回答選択肢のグループを「質問内容を追加ボタン
（<div class="plus-question">）」をクリックすると質問項目に
対する回答選択肢のグループを追加表示させ、
「選択肢を追加（<input class="plus_select">）」をクリックするたびに

<div class="selectItem">が追加されるようにしたいと考えております。

発生している問題・エラーメッセージ

「質問内容を追加ボタン（<div class="plus-question">）」をクリック
すると新たな質問項目と回答選択肢のグループを表示させることはできたのですが、
「選択肢を追加（<input class="plus_select">）」をクリックすると
前の質問項目に対する回答選択肢のグループ内にも選択肢が追加されてしまうため
これを回避したいです。

該当のソースコード

        <div class="question-wrapper">
          <div class="select-group">
              <ul>
                <li class="select-type"><label><input type="checkbox" name="selectType-checkbox" value="チェックボックス" id="1" name="チェックボックス">チェックボックス</label></li>
                <li class="select-type"><label><input type="radio" name="selectType-radio" value="ラジオボタン" id="2" name="ラジオボタン">ラジオボタン</label></li>
                <li class="select-type"><label><input type="text" name="selectType-free" value="記述式" id="3" name="記述式">記述式</label></li>
              </ul>
          </div>
          <div class="question-Item">
            <div class="question-title"></div>
              <ul class="cp_iptxt">
                <input class="ef" type="text" placeholder="">
                <label>質問内容<i class="fas fa-trash-alt"></i></label>
                <span class="focus_line"></span>
              </ul>
              <div class="selectItem">
                <div class="cp_iptxt">
                  <input class="ef" type="text" placeholder="">
                  <label>選択肢<i class="fas fa-trash-alt"></i></label>
                  <span class="focus_line"></span>
                </div>
              </div>
            </div>              
              <div class="selectItem-plus">
                <div class="cp_iptxt-plus">
                  <input class="plus_select ef2" type="text" placeholder="">
                  <label>選択肢を追加</label>
                </div>
              </div>
          </div>

        <div class="plus-question"><span class="plus"><i class="fas fa-plus-circle"></i>質問を追加</span></div>

// ＊＊＊＊＊追加ボタンクリックで質問追加表示＊＊＊＊＊

  $('.plus').click(function() {
    $('.plus-question-wrapper').slideToggle(100);
  });
  
  $('.plus2nd').click(function() {
    $('.plus-question-wrapper').slideToggle(100);
  });
  
// ＊＊＊＊＊選択肢追加クリックで選択肢追加＊＊＊＊＊
  $('.selectItem-plus').click(function() {
    $('.question-Item').append($('.selectItem'));
  });

Comments

[yambejp]

まずnameがバラバラのradioが何をしたいかわからないです

[退会済みユーザー]

コメントありがとうございます。
質問への回答形式をチェックボックス、ラジオボタン、記述式と
選択できるようにする予定のため、このような記述にしています。

[退会済みユーザー]

ご指摘頂いたinput typeの箇所を修正しました。
ご指摘ありがとうございました。

Answer 1

$('.question-Item')だと全部になってしまうので
最後に追加したいのであれば$('.question-Item:last')にするといいんじゃないでしょうか。

Comments

[退会済みユーザー]

コメントありがとうございます。
$('.question-Item:last')にするとたしかに最後に追加されるようになりました。
ただ、再び「選択肢を追加（<input class="plus_select">）」をクリックしても追加されるようにしたのですが、追加できなくなりました。
他にも何か必要でしょうか？

Answer 2

$('.selectItem-plus').click(function() {
var $prev = $(this).prev();
$prev.append($('.selectItem'));
});

これでどうでしょう？

追記：

$('.selectItem-plus').click(function() {
var $prev = $(this).prev();
var $clone = $($('.selectItem')[0]).clone(); //追加する要素を複製
$clone.find('input').val(''); //入力内容リセット
$prev.append($clone);
});

修正しました。これならいけると思います。

Comments

[退会済みユーザー]

ありがとうございます。
さきほど確認したのですが、たしかに最後に<div class="selectItem">が
追加されるのですが、さらに「選択肢を追加（<input class="plus_select">）」を
クリックしても<div class="selectItem">が追加されませんでした。
私の説明足らずで申し訳ありません。
「選択肢を追加（<input class="plus_select">）」をクリックするたびに
<div class="selectItem">が追加されるようにしたいと考えております。

[退会済みユーザー]

さきほど確認致しました。
実現したい内容通りになりました。
本当にありがとうございました！