For the id attribute of each checkbox, can you please replace the current ones with the name of the section, a hyphen and then the number? For example, if the checkboxes are in the Images section, the id should be "images-chk1", "images-chk2" and so on; if they are in the Text section, they should be "text-chk1", "text-chk2" and so on?

    <h2>1. Images</h2>
    <ul>
        <li>
            <label><input type="checkbox" id="chk1" /><span>Icons and images are correct, sized properly, and positioned correctly</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk2" /><span>Alt attributes added to images and icons where needed</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk3" /><span>Images are optimized and not oversized</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk4" /><span>Rounded corners/borders are consistent with spec</span></label>
        </li>          
    </ul>

    <h2>2. Text</h2>
    <ul>
        <li>
            <label><input type="checkbox" id="chk5" /><span>Font sizes, font families, and font weights are correct</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk6" /><span>Text styles (line height, letter spacing, capitalization) are accurate</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk7" /><span>Text and UI elements scale correctly and remain readable at different screen sizes</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk8" /><span>Text content matches the design copy exactly (spelling, grammar, punctuation)</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk9" /><span>Placeholder content (if any) is replaced with final content</span></label>
        </li>      
    </ul>

    <h2>3. Layout/Design</h2>
    <ul>
        <li>
            <label><input type="checkbox" id="chk10" /><span>Layout matches the design (spacing, alignment, grid)</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk11" /><span>Colors match the design (backgrounds, text, borders, icons, buttons)</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk12" /><span>Buttons and UI elements match design (shape, size, states like hover/focus/active)</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk13" /><span>Margins and paddings are consistent and mirror the design</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk14" /><span>Shadows, blurs, and other effects correspond to the mockup</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk15" /><span>Layout adjusts correctly across common breakpoints (mobile, tablet, desktop)</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk16" /><span>No horizontal scrolling or layout breaking on any viewport size</span></label>
        </li>
        <li>
            <label><input type="checkbox" id="chk17" /><span>All interactive elements remain accessible and usable on all screen sizes</span></label>
        </li>
    </ul>
    
  	<h2>4. Functionality & Interactivity</h2>
  	<ul>
    	<li>
      	<label><input type="checkbox" id="chk18" /><span>All links and buttons work and navigate correctly</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk19" /><span>Interactive elements have correct hover, focus, and active states</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk20" /><span>JavaScript interactions work without errors</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk21" /><span>Any dynamic content loads correctly and updates as expected</span></label>
    	</li>
  	</ul>
	
  	<h2>5. Accessibility</h2>
  	<ul>
    	<li>
      	<label><input type="checkbox" id="chk22" /><span>Semantic HTML elements used appropriately (e.g., &lt;header&gt;, &lt;nav&gt;, &lt;main&gt;)</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk23" /><span>Alt attributes added to images and icons where needed</span></label>
    	</li>
  	</ul>
	
  	<h2>6. Performance Considerations</h2>
  	<ul>
    	<li>
      	<label><input type="checkbox" id="chk24" /><span>Images are optimized and not oversized</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk25" /><span>No console errors or warnings on page load and interaction</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk26" /><span>CSS and JS are loading efficiently</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk27" /><span>Page load time is reasonable</span></label>
    	</li>
  	</ul>
	
  	<h2>7. Content Accuracy</h2>
  	<ul>
    	<li>
      	<label><input type="checkbox" id="chk28" /><span>Text content matches the design copy exactly (spelling, grammar, punctuation)</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk29" /><span>Placeholder content (if any) is replaced with final content</span></label>
    	</li>
    	<li>
      	<label><input type="checkbox" id="chk30" /><span>Links and references point to correct URLs/resources</span></label>
    	</li>
  	</ul>