Feature: Clickable h4 elements

[MaoShizhong]

Because

h4 headings were generating IDs but were not clickable like with h3 headings.

This PR

• Makes level 4 headings render h4 > a like with level 3 headings
• Moves the generated IDs to the heading elements themselves, instead of the parent section
• Replaces section id attribute with data-title
• Amends CSS and Tailwind accordingly
• Amends toc controller accordingly
• Amends rspec tests to account for new HTML structure
• Allows data-title to render in preview component
• Reduces duplication in a method

Issue

Closes #4503

Additional Information

Pull Request Requirements

• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [x] The title of this PR follows the keyword: brief description of change format, using one of the following keywords:
  • Feature - adds new or amends existing user-facing behavior
  • Chore - changes that have no user-facing value, refactors, dependency bumps, etc
  • Fix - bug fixes
• [x] The Because section summarizes the reason for this PR
• [x] The This PR section has a bullet point list describing the changes in this PR
• [x] I have verified all tests and linters pass after making these changes.
• [x] If this PR addresses an open issue, it is linked in the Issue section
• [x] If applicable, this PR includes new or updated automated tests

[MaoShizhong]

QA in review app:

1. Visit a lesson with h4 headings e.g. /lessons/node-path-intermediate-html-and-css-css-units
2. Click on any h4 to auto-scroll to that subsection.
3. Open devtools elements pane to view lesson structure:
   • section should have data-title with same name as its first h3 of type's id
   • h3 and h4 should both have ids
   • h4s should have a child a with the correct fragment href
4. Toc should still work as before - if not, then it's likely the issue that will be fixed in #4506 and conflict can be resolved accordingly.