昨日は回答頂けましてありがとうございます。

今回 for文の仕様面なのか？分からない点が出てきまして ご教授頂けないでしょうか。

//引数用
function set(number){

var class_01 = number;

const $btn = $('<button class="add"><img src="./data/image/kan.gif" width="100" height="100"></button>');
$('.add').addClass(class_01);
$('.add').toggleClass('add');

      $('.layer').append($btn).trigger('create');

}


//ループ
$(document).ready(function(){

  $(function() {

    for (var i=1; i<4; i++) {

      set(i);引数

    }

  });

});

問題部位を簡略化しました。

こちらで動かすとループ文内の関数が走ってボタンが生成されます。
生成された後に付属しているクラス名を追加、基点となるクラス名を削除します。
生成されたボタンのクラス名は連番が付いていることになります。

しかし、１つだけ【add】クラス名のみ 連番が付いていないものがありました。

変数「i」の数を増やしても 同じ現象が起きておりました。

コンソールパネルでクラス名を確認すると【class_01】で追加されているはずの番号【1】のクラス名のみありません。

最初に生成されたボタンへのcss操作が適用されておりませんでした。

この現象を避けるには どの様に記述すれば良いのでしょうか？