How to reorder QueryList with DOM order when DOM get updated dynamically?

Question

I have an expandable mat table It is a inline editable table using input tag inside each. Each input field have directive called ArrowNavigationDirective.

 &l