if文 要素が増え続ける

Question

前提・実現したいこと

html css JavaScript(jQuery)を使ってホームページの模写コーディングをしています。
フレキシブルデザインにするため画面サイズによってデザインを切り替えようとしています。
PC画面では簡単なデザインでスマホ画面になるとアコーディオンのような表示にしようとしています。

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

リロードもしくは画面を変えるたびに要素をクリックしたときに1回→2回→３回、、、とアコーディオンの開閉が増える状態です。
画面サイズが変わった時にアコーディオン用のアイコンも追加しているのですがアイコンも増えていきます。

該当のソースコード

$(window).on('load resize', function(){
    const w = $(window).width();
    const x = 768;

    if (w < x) {
//画面サイズが768px未満のときの処理
      $("#passflowsId").addClass("passflowsFlexble").removeClass("passflows");
      $(".passflow").addClass("passflowFlexble").removeClass("passflow");
      $(".flow-right").addClass('passflowrightFlexble').removeClass('flow-right');
      $(".flow-left").addClass('passflowleftFlexble').removeClass('flow-left');
      $(".passflow-title").append('<span><i class="fa fa-angle-down"></i></span>')
      alert("aaa")
      $('.passflowFlexble').click(function(){
        var $answers = $(this).find('.passflowrightFlexble')
        if ($answers.hasClass('open')) {
          $answers.removeClass('open');
          $answers.slideUp();
          $(this).find('span').html('<span class="fa fa-angle-down"></span>');
        } else {
          $answers.addClass('open');
          $answers.slideDown();
          $(this).find('span').html('<span class="fa fa-angle-up"></span>');
        }
      })
    } else {
      //それ以外のときの処理
      $("#passflowsId").addClass("passflows").removeClass("passflowsFlexble");
      $(".passflow").addClass("passflow").removeClass("passflowFlexble");
      $(".flow-right").addClass('flow-right').removeClass('passflowrightFlexble');
      $(".flow-left").addClass('flow-left').removeClass('passflowleftFlexble');
    }

試したこと

繰り返し処理がされているのはわかるのですが対処の仕方がわかりません。
returnで処理を終わらせるのかと思い要素の最後に追加したのですがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[YT0014]

on()の仕様を確認して、該当の関数がいつ呼ばれるのか、把握してください。

[keeeee]

wrapperの区切りで呼び出されていると思います。
スマホだとスクロールするたびに呼び出される感じです。

Answer 1

$('.passflowFlexble').click(function(){}はリサイズのイベントの外に出さないとクリックイベントが増えます

Answer 2

同じコンテンツをもう一つ作成しPC表示の時とスマホ表示の時とで切り替えることにしました。
PC用のコンテンツは普通のコンテンツなのでそのままで、
スマホ用の時にアコーディオンにするので作成し、それぞれの切り替えに
ディスプレイサイズ指定をし、display:none; display:block;で切り替えました。

ご回答くださった方、ありがとうございます。