使用AJAX循环加载PHP中的内容

Question

I am building a site using PHP (Wordpress) and I'm trying to build dynamic tabs so that the administrators can create their own tabs with custom content.

I am using the Repeater Field from Advanced Custom Fields Pro to create the user UI to make the tabs.

My problem is; The content that will be in the tabs will be too big for just using CSS to hide or show so i will need to fetch the tab contents with AJAX.

This is the code i have at the moment:

// The tabs buttons
if( have_rows('tabs') ):
  echo '<ul class="list horizontal tabs-btns">';
  $tab_no = 0;
  while ( have_rows('tabs') ) : the_row();

    $tab_no++;
    $tab = get_sub_field('tab');
    echo '<li><button class="btn big discrete';
    if ( $tab_no == 1 ):
      echo ' active';
    endif;
    echo '" data-tab="'.$tab_no.'">';
    echo $tab;
    echo '</button></li>';

  endwhile;
  echo '</ul>';
endif;

// The tabs content
if( have_rows('tabs') ):
  echo '<div class="tabs-content">';
  $tab_no = 0;
  while ( have_rows('tabs') ) : the_row();

    $tab_no++;

    if ( $tab_no == 1 ):
      // Prints the content of the first tab by default
      include(get_template_directory() . '/inc/tab-content.php');
    else;
      // The other tabs i want to create some kind of function for which i can fetch with AJAX
      // Something like:
      // define ('tab-content-'.$tab_no):
      // include(get_template_directory() . '/inc/tab-content.php');
    endif;

  endwhile;
  echo '</div>';
endif;

So by default all the tab buttons are showing and only the content for the first tab, the first child in the while loop.

What i want to ask is; Is there any way in PHP to define the other children of the while loop so that i can fetch it with AJAX?

Something like this:

$('.tabs-btns button').each(function() {
    $(this).click(function(){
        var tabNo = $(this).data("tab");
        var tabContent = $(this).parents('.tabs-btns').next('.tabs-content');
        if ( !$(this).hasClass('active') ) {
            tabContent.empty();
            tabContent.load(tab-content- + tabNo); // So here i want to to fetch the data from the while loop in some way
        }
        $(this).parent('li').siblings('li').find('.active').removeClass('active');
        $(this).addClass('active');
    })
});

Is it even possible? Sorry if I'm explaining it badly. I don't really know how else to explain it.

</div>