要素の表示が上手くいかない

Question

前提・実現したいこと

ページ表示する際に、要素の表示を行いたいのですが、上手く実装できずこちらに質問させていただきました。

該当のソースコード

<div class="setting">
  <div class="Field01">
    <p>条件１</p>
      <select name="c_field" class="inputT01">
          <option value="0">aaa</option>
          <option value="1">bbb</option>
          <option value="2">ccc</option>
      </select>
    <p>条件２</p>
      <input type="text" name="c_term" class="inputT01 importantBox01" placeholder="keyword">
  </div>
  <input type="button" id="search_add" value="追加">
    <div class="Field01" id="search_condition" style="display: none;">
    　<p>条件０</p>
        <select name="c_syntax" class="inputT01">
          <option value="0">AND</option>
          <option value="1">OR</option>
          <option value="2">NOT</option>
        </select>
      <p>条件１</p>
        <select name="c_field" class="inputT01">
          <option value="0">aaa</option>
          <option value="1">bbb</option>
          <option value="2">ccc</option>
        </select>
      <p>条件２</p>
    　<input type="text" name="c_term" class="keyword">
    </div>
    <input type="button" name="" style="display: none;" value="追加">
</div>

試したソースコード

$(function() {

  for (var i = 0; i < 2; i++) {

    $("#search_condition").last().css('display', 'block');
    $("#search_condition").clone().appendTo(".setting");
    $("#search_condition").last().css('display', 'none');
    $("#search_add").last().css('display', 'block');
    $("#search_add").clone().appendTo(".setting");
    $("#search_add").last().css('display', 'none');
  }
});

表示したい内容

画面をロードした際に、以下のような表示になるよう設定したいと思っています。

条件１
セレクトボックス

条件２
テキストエリア

＝＝＝＝＝＝＝＝＝
下記項目が、画面ロード時に追加されるようにしたい

条件０
セレクトボックス

条件１
セレクトボックス

条件２
テキストエリア

条件０
セレクトボックス

条件１
セレクトボックス

条件２
テキストエリア

追加ボタン　※一番下に表示する

問題点

条件１
セレクトボックス

条件２
テキストエリア

＝＝＝＝＝＝＝＝＝
下記項目が、画面ロード時に追加されるようにしたい

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
条件０
セレクトボックス

条件１
セレクトボックス

条件２
テキストエリア
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑　このエリアが非表示となってしまいます。

条件０
セレクトボックス

条件１
セレクトボックス

条件２
テキストエリア

追加ボタン　※一番下に表示する

Comments

[m.ts10806]

「うまくいかない」だと何も伝わらないので、起きている現象をきちんと書いてください。
https://teratail.com/help/question-tips#questionTips3-4-1

[maystorm]

情報が不足しておりました。
問題点を追記致しました。

Answer 1

要素の表示が上手くいかない

ここでいう要素とはなんですか？

コードをみてみたら、画面をロードした際に表示されていましたよ。
ゴールがわからないのですが、読み込みは一瞬でされてるので、
display: none;で隠している部分の表示を遅らせたいのでしょうか。
何かボタンを押したら隠した部分が出てくるようにしたいのでしょうか。

Comments

[maystorm]

ご確認ありがとうございます。
質問内容がわかりづらく、お手数をお掛けしました。

Answer 2

clone()はidもコピーします。
idは１ページに１つまでです。
それ以上あると、JavaScriptは正しく動かない可能性があります。
おそらくそこが関係してるのでは。
idをclone()するたびに書き換えるか、clone()する要素はid与えなくてもいいような実装を工夫してみてください。

Comments

[maystorm]

ご確認ありがとうございます。
ご指摘頂いた通り、同じidを複数設定していることが問題でした。
clone()を使用せず、追加したいコードをそのままappendできるよう修正しました。

[m.ts10806]

clone使っても書き換えれば良いと言えばよいです