jsonデータをループで取得しHTMLもループで生成して当てはめているのですが挙動がおかしい

Question

JSONデータを取得してその件数に合わせてHTMLもその件数分生成するといった事がしたのですが、
for文が回り終わる度、1回目一回、2回目2回、3回目3回...とfor文の中を繰り返す回数が増えてしまいます。
continueで特定回数以上に到達すると抜けるみたいなこともやりましたが、うまくいかず。このループ回数が一回一回増える原因は何故なのでしょうか。

JS

  $(document).ready(function () {
    $.getJSON("data/sample_data.json", function(data){
        for(var i in data){

          $("#genreTab0").append("<div class=\"recruiting\"></div class=\"recruiting\">");

          $(".recruiting").append("<p class=\"station\">"+data[i].station+"</p>");
          $(".recruiting").append("<p class=\"role\">"+data[i].role+"</p>");
          $(".recruiting").append("<p class=\"age\">"+data[i].age+"</p>");
          // console.log(pCount);


        }
    });
});

JSONデータ

[
    {
        "station": "バリトン",
        "role": "老人",
        "age": "60歳～79歳"
    },
    {
        "station": "バリトン",
        "role": "子供",
        "age": "6歳～13歳"
    },
    {
        "station": "バリトン",
        "role": "子供",
        "age": "6歳～13歳"
    }
]

Answer 1

dataの２巡目以降、前回以前につくった$(".recruiting")にもappendされますよね
せめてこんな感じで

<script>
$(function(){
  $.getJSON("data/sample_data.json", function(data){
    console.log(data);
    for(var i in data){
      $("<div class=\"recruiting\"></div>")
      .append("<p class=\"station\">"+data[i].station+"</p>")
      .append("<p class=\"role\">"+data[i].role+"</p>")
      .append("<p class=\"age\">"+data[i].age+"</p>")
      .appendTo($("#genreTab0"));
    }
  });
});
</script>
<div id="genreTab0"></div>

Comments

[KY1212]

あーなるほど！すごく腑に落ちました。わかりやすい説明をありがとうございます１

Answer 2

$(".recruiting")はそれが実行されたときにあるすべての.recruitingだからでは？

空の要素に要素を詰め込んだ後で、$("#genreTab0").appendしてみてはいかがでしょう。

var a=$("<div class=\"recruiting\"></div class=\"recruiting\">");
a.append("<p class=\"station\">data[i].station</p>");
a.append("<p class=\"role\">data[i].role</p>");
a.append("<p class=\"age\">data[i].age</p>");
$("#genreTab0").append(a);

Comments

[KY1212]

分かりやすい回答ありがとうございます！
おかげで原因を理解できました！どちらの回答も分かりやすく悩みましたが、早いほうをベストアンサーにしました。