置換した文字それぞれに違ったclass名を割り当てたいです。

Question

前提・実現したいこと

配列にならって、文字を置換し、置換した文字それぞれにclass名とonmouseoverのfunction名を割り当てたい。

例)
kiiro
↓
new_kiiroに置換
------------------------------ここまでは正常に作動
・class = "click2"
・onmouseover = "open_window2"
の要素を追加したい。

配列arr2のコードはそのままに、後付けでclass名等を指定する方法を探しています。

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

//*〜//*内のプログラムが稼働しなく、class名とonmouseover要素が追加できません。
変数 i を用いたclass名が設定できません。

該当のソースコード

//配列は大量にあることを想定
  var arr1 = [

    /aka/g,
    /ao/g,
    /kiiro/g,
  ];

  var arr2 = [
　  "new_aka",
    "new_blue2",
    "new_yellow2",
  ];

//id:outputの文章を、上記の配列にならって置換
  $('#output').each(function(){
  for(var i=0, len=arr1.length; i<len; i++){
    var txt = $(this).html();
    $(this).html(
      txt.replace(arr1[i],
        '<a class = "click" + arr2[i] + '</a>')
    );

//*
             $(".click" + i).attr('onmouseover','open_window'+ i +'()');
             $(".click"+ i).addClass(".click" + i +1);
             $(".click" + i).removeClass("");
//*
  }
 });;

//下のような関数を設定し、マウスが乗ると、文字の色が背景色として出るようにしたい。
function open_window0(){
  var elements = document.getElementsByClassName('.click0');
  for(e=0;e<elements.length;e++){
    elements[e].style.backgroundColor = "red"
  }

function open_window1(){
  var elements = document.getElementsByClassName('.click1');
  for(e=0;e<elements.length;e++){
    elements[e].style.backgroundColor = "blue"
  }
//・・・と続いていきます

試したこと

//*〜//*内を,、具体的な名前[.addClass(".click1")など]に設定した場合は稼働しましたが、iを用いて各Classの追加とonmouseoverのfunction名をつけることができませんでした。
attrやaddclassの()内に問題があると思うのですが、[i]を用いた命名の方法がわかりませんでした。

プログラミング初心者で、的外れなこともあるかもしれませんがよろしくお願いいたします。

Answer 1

引用符がないので引用符をつける必要があります。
また、clickにiを加えるのだと思いますがいかがでしょうか？

      txt.replace(arr1[i],
        '<a class = "click'+i+'">' + arr2[i] + '</a>')

addClassの引数が「.click」になっていますが、ドットは不要だと思います。
「"click" + i +1」だと「click01」のようになりませんか？括弧が必要だと思います。

    $(".click"+ i).addClass("click" + (i +1));

Answer 2

$(".click"+ i).addClass(".click" + i +1);で、+1としていることが原因かと思います。

あと、$(".click" + i).removeClass(""); は不要では？