How to change shortcode after user interacts with front-end button?

I'm using Royal Audio Player as a plugin for a website I'm creating, and I want to have something similar to what this guy created for his Voiceover website.

Essentially, I want text above the audio player with the different categories available to click on, and when one is clicked on by the user then it will change the player to the respective playlist depending on which one was clicked on.

So far, I've got 2 shortcodes for the audio player:

[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]
[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Narration" start_track_id="preset"]

The audio player does have a drop-down that the user can use, which when clicked on will show the other categories and they can choose from there.

But I want the user to be able to see all of the categories at a given time with a single player. To my knowledge, changing the short-code using AJAX is the only way I can really achieve my goal.

I tried following this stack overflow post: Change wordpress shortcode with Javascript.

So I got code like this:

add_action(
    'wp_ajax_switch_audio_playlist', 
    'switch_audio_playlist'
);
add_action(
    'wp_ajax_nopriv_switch_audio_playlist',
    'switch_audio_playlist'
);

function switch_audio_playlist() 
{
    if (isset($_POST['playlist'])) 
    {
        $playlist = sanitize_text_field($_POST['playlist']);

        echo do_shortcode('[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers"            start_playlist_id="' . $playlist . '" start_track_id="preset"]');
        $html = ob_get_clean();

        wp_send_json_success($html);
    } 
    else 
    {
        wp_send_json_error('No playlist provided.');
    }
}

function enqueue_custom_ajax_script() 
{
    wp_enqueue_script(
        'custom-ajax-script',
        get_template_directory_uri() . '/js/custom-ajax.js',
        array('jquery'),
        null,
        true
    );
    
    wp_localize_script(
        'custom-ajax-script',
        'ajax_object',
        array('ajax_url' => admin_url('admin-ajax.php'),
    );
}

add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_script');

HTML/JS + Shortcode:

<div class="playlist-container">
    <a class="switch-playlist" data-playlist="Audiobooks">Audiobooks</a>
    | <a class="switch-playlist" data-playlist="Narration">Narration</a>
</div>
<div id="audio-player-container">
    [fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.switch-playlist').on('click', function() {
        let playlist = $(this).data('playlist');
        console.log('Switching to playlist:', playlist);

        $.ajax({
            url: ajax_object.ajax_url, // This comes from wp_localize_script
            method: "POST",
            data: {
                action: 'fetch_shortcode',
                playlist: playlist
            },
            success: function(response) {
                console.log('AJAX response:', response);
                $('#audio-player-container').html(response.data);
            }
        });
    });
});
</script>

After fixing a localization issue, I've come to this error:

When I load the page, the audio player is loading as intended: My inspector before I click on the Narration Button (Screenshot).

But when I press on the narration button the page shows nothing and the inspector looks like this: Inspector after I click on the narration button (Screenshot).