为不同的对象重新创建信息元素或隐藏它们？

目前,当我使用jQuery显示不同的元素时,我将从头开始重新创建它们并将它们添加到页面中.

我已经到了一个点,我希望用户能够检查一个元素上的一个框,然后单击一个按钮以查看一些不同的信息,然后能够切换回来看到仍然检查的前一个框.

由于我每次用户切换时都在制作新元素,因此无法以直接的方式进行.

我想知道重绘元素或修改CSS display属性是否更好.

我可以看出为什么隐藏元素会有所帮助,但我不确定是否有必要在屏幕上保留~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");
});

问题是,如果您查看另一组信息行然后返回,则会重置行颜色.