javascript - 別のオブジェクトの情報要素を再作成するか、非表示にしますか?

Question

現在、jQueryでさまざまな要素を表示しているため、それらを最初から再作成してページに追加しています。

ユーザーが 1 つの要素のボックスをチェックしてから、ボタンをクリックして別の情報を表示し、元に戻って前のボックスがまだチェックされているのを確認できるようにしたいところまで来ました。

現在、ユーザーが切り替えるたびに新しい要素を作成しているため、これは簡単にはできません。

display要素を再描画するか、CSSプロパティを変更するか、どちらが良いか迷っています。

要素を非表示にすると便利な理由はわかりましたが、画面に最大 150 個の要素を表示し、それらを非表示にする必要があるかどうかはわかりません。

これは私がこれまでに持っているものです:

https://jsfiddle.net/W4Km8/7767/

このコードは、情報行の色を変更します。

$("#table").on("click", ".on", function() {
    $(this).removeClass("on");
    $(this).addClass("off");
});
$("#table").on("click", ".off", function() {
    $(this).addClass("on");
    $(this).removeClass("off");
});

問題は、別の情報行のセットを見て戻ってくると、行の色がリセットされることです。