Updating the DOM with List of Objects from Firebase

I currently have a web application that stores data with Firebase Real-Time Database that uses the object (list) of objects to update the DOM. The list of objects is sorted and grouped according to some rules that the user chooses.

What I am currently doing is every time the user adds, deletes, or modifies the data, an on value callback is triggered and the entire list is returned in the callback to recreate the list. Then the list is sorted, the DOM element has its innerHTML cleared, and new elements are created. This means that even if the user updates a single property that does not affect the sorting or grouping, the entire DOM is recreated. This is what I am trying to improve.

How can I improve the process to reduce the amount of the DOM that is deleted and recreated?