Cloning element containing Mathquill fields

[Ephraim-Bryski]

I have an application with editable Mathquill fields that can be added and removed by the user. I would like to implement undo and redo by cloning the state of the parent containing these fields on keystrokes, and replacing the parent with these clones on undo. I'm currently implementing this as follows:

const clones = []

function track_changes(){
  const current_state = $("#parent").clone(true, true)
  clones.push(current_state)
}

function undo(){
  const past_state = clones.pop()
  $("#parent").replaceWith(past_state)
}

While this works, it becomes impossible to edit Mathquill fields after calling undo (you cannot focus back in on the field).

My specific requirements:

• I'm okay with changing the specific implementation (i.e. not using jquery clone).
• The Mathquill fields are several layers deep below the parent (i.e. not direct children).
• Ideally, I wouldn't recreate the Mathquill fields every undo as there can be 20-30 editable fields at once, and I want to avoid the time delay.
• It's not necessary that the previous focus is restored. I only want to make sure the fields can continue to be edited.
• I'm not looking to track the changes just for a single Mathquill field. It needs to track changes for all the fields, as well as other changes (e.g. those done on regular input fields, user adding and removing field, etc.).

Desmos implements exactly what I'm looking for.

Is there a straight-forward solution? Does it require something more complex?

Thanks!