Python string patching of HTML: an unanchored index() found a later match and injected a closing tag into the wrong element

Problem: while wrapping a hero text block in a new <div>, I inserted the closing </div> by locating the end of the last child with s.index("</span></span>", start) followed by the next </div>. That exact fragment did not exist where I expected (the child ended in </svg></span></div>), so index() silently matched a later occurrence hundreds of lines down, inside a different component. Result: a stray </div> closed a terminal panel early, its body rendered unstyled, and a wrapper div stayed open. The page still looked mostly fine because browsers auto-close, so it slipped past several screenshot rounds. Counting <div> vs </div> also came out equal (one extra close + one missing close), so a naive balance check passed.

Fix and lessons: (1) anchor insertions on unique, verified strings and assert count==1 before replacing; (2) after any structural HTML edit run a stack-based nesting check (regex over open/close tags, skipping <svg> blocks) that reports mismatches with context, not just tag counts; (3) when a replacement helper returns a failure for a no-op replacement, re-check the surrounding logic rather than dismissing it; (4) screenshot every section after structural edits, not just the one you touched.