A-Z index almost correct

Hi there ??

Last week i’ve created a movie review website. Since i don’t have any coding knowledge and i still would really like to have a alphabetic index on my website, i tried using ChatGPT to write me a code for such a feature.

I almost got it working correctly 100%.. however: if i click on one letter (A for example) it still shows all the posts instead of just the ones starting with ‘A’.

Can anyone please check if there is a small error or something in the code? There’s also some Javascript in the footer and some styling in the CSS file, but i reckon the problem is in the main code?

<?php
function?generate_alphabetical_index()?{
????//?Define?the?index:?alphabet?A-Z?and?the?numeric?0-9
????$index?=?array_merge(range('A',?'Z'),?['0-9']);
????$output?=?'<div?class="alphabetical-index">';
????
????//?Alphabet?and?number?links?at?the?top
????$output?.=?'<div?class="index-links">';
????foreach?($index?as?$letter)?{
????????$output?.=?'<button?class="index-link"?data-letter="'?.?$letter?.?'">'?.?strtoupper($letter)?.?'</button>';
????}
????$output?.=?'</div>';

????//?Container?for?the?posts?(hidden?initially)
????$output?.=?'<div?class="index-posts">';

????//?Loop?through?each?letter?and?create?a?post?list
????foreach?($index?as?$letter)?{
????????$output?.=?'<div?class="index-posts-for-letter"?id="posts-'?.?$letter?.?'"?style="display:?none;">';??//?Hidden?by?default
????????$output?.=?'<h2?class="index-posts-title">'?.?strtoupper($letter)?.?'</h2>';
????????$output?.=?'<ul?class="index-post-list">';

????????//?Query?the?posts?for?the?current?letter?(this?is?handled?via?the?URL)
????????$args?=?array(
????????????'post_type'??????=>?'post',
????????????'posts_per_page'?=>?-1,
????????????'orderby'????????=>?'title',
????????????'order'??????????=>?'ASC',
????????????'post_status'????=>?'publish',
????????????'cat'????????????=>?123,?//?Replace?with?your?category?ID
????????);

????????//?Only?show?posts?for?the?letter?we?want?(based?on?URL?parameter)
????????if?(isset($_GET['letter'])?&&?strtoupper($_GET['letter'])?===?strtoupper($letter))?{
????????????add_filter('posts_where',?'filter_posts_by_first_letter',?10,?2);
????????}

????????$query?=?new?WP_Query($args);

????????//?Remove?the?filter?after?the?query
????????remove_filter('posts_where',?'filter_posts_by_first_letter');

????????if?($query->have_posts())?{
????????????while?($query->have_posts())?{
????????????????$query->the_post();
????????????????$output?.=?'<li?class="index-post-item"><a?href="'?.?get_permalink()?.?'">'?.?get_the_title()?.?'</a></li>';
????????????}
????????}?else?{
????????????$output?.=?'<li?class="no-posts">No?posts?found?for?this?letter/number?in?the?selected?category.</li>';
????????}

????????wp_reset_postdata();
????????$output?.=?'</ul>';
????????$output?.=?'</div>';??//?End?of?posts?for?this?letter
????}

????$output?.=?'</div>';??//?End?of?index-posts?container
????$output?.=?'</div>';??//?End?of?alphabetical-index?container
????return?$output;
}

add_shortcode('alphabetical_index',?'generate_alphabetical_index');

//?Function?to?filter?posts?by?the?first?letter?of?the?title
function?filter_posts_by_first_letter($where,?$query)?{
????if?($query->is_main_query()?&&?!is_admin())?{
????????global?$wpdb;
????????//?Get?the?selected?letter?from?the?URL?(query?parameter)
????????if?(isset($_GET['letter'])?&&?!empty($_GET['letter']))?{
????????????$letter?=?strtoupper($_GET['letter']);
????????????//?Modify?the?WHERE?clause?to?check?if?the?title?starts?with?the?selected?letter
????????????$where?.=?"?AND?{$wpdb->posts}.post_title?LIKE?'{$letter}%'";
????????}
????}
????return?$where;
}
?>

The page I need help with: [log in to see the link]