Custom Shortcodes Giving error on development site

I have an existing site that uses custom shortcodes. when i tried to transfer them to a new theme & dev site, it gives me an error. The shortcode is about tabbed content. You can see the error here: https://dev.brothermartin.com/extracurriculars/academic-games/ and this is it:

Notice: Undefined variable: tab3_button in /home/brothermartin18/public_html/blog/wp-content/themes/Brother_Martin_2018/lib/admin/shortcodes/shortcodes.php on line 60

Notice: Undefined variable: tab4_button in /home/brothermartin18/public_html/blog/wp-content/themes/Brother_Martin_2018/lib/admin/shortcodes/shortcodes.php on line 60

Notice: Undefined variable: tab5_button in /home/brothermartin18/public_html/blog/wp-content/themes/Brother_Martin_2018/lib/admin/shortcodes/shortcodes.php on line 60

This is the code related to the shortcode:

function mbiz_tabbed_box( $atts, $content = null ) {
 extract( shortcode_atts( array(
  'tab1' => '',
  'tab2' => '',
  'tab3' => '',
  'tab4' => '',
  'tab5' => '',
  ), $atts ) );

if ($tab1) $tab1_button = '<li><a href="#" title="tab1">' . esc_attr($tab1) . '</a></li>';
if ($tab2) $tab2_button = '<li><a href="#" title="tab2">' . esc_attr($tab2) . '</a></li>';
if ($tab3) $tab3_button = '<li><a href="#" title="tab3">' . esc_attr($tab3) . '</a></li>';
if ($tab4) $tab4_button = '<li><a href="#" title="tab4">' . esc_attr($tab4) . '</a></li>';
if ($tab5) $tab5_button = '<li><a href="#" title="tab5">' . esc_attr($tab5) . '</a></li>';

return '<div class="tabs-style1"><div class="tabs-navigation"><ul class="tabs-nav">'
        . $tab1_button . $tab2_button . $tab3_button . $tab4_button . $tab5_button .
        '</ul></div><div class="tabs-content">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('tabbed_box', 'mbiz_tabbed_box');

Does anyone have any simple fixes for this? It only occurs when 5 tabs are not utilized. I didn’t create these, so having a hard time troubleshooting.

Initialize the variables first. See code below:

function mbiz_tabbed_box( $atts, $content = null ) {
 extract( shortcode_atts( array(
  'tab1' => '',
  'tab2' => '',
  'tab3' => '',
  'tab4' => '',
  'tab5' => '',
  ), $atts ) );

$tab1_button = $tab2_button = $tab3_button = $tab4_button = $tab5_button = '';

if ($tab1) $tab1_button = '<li><a href="#" title="tab1">' . esc_attr($tab1) . '</a></li>';
if ($tab2) $tab2_button = '<li><a href="#" title="tab2">' . esc_attr($tab2) . '</a></li>';
if ($tab3) $tab3_button = '<li><a href="#" title="tab3">' . esc_attr($tab3) . '</a></li>';
if ($tab4) $tab4_button = '<li><a href="#" title="tab4">' . esc_attr($tab4) . '</a></li>';
if ($tab5) $tab5_button = '<li><a href="#" title="tab5">' . esc_attr($tab5) . '</a></li>';

return '<div class="tabs-style1"><div class="tabs-navigation"><ul class="tabs-nav">'
        . $tab1_button . $tab2_button . $tab3_button . $tab4_button . $tab5_button .
        '</ul></div><div class="tabs-content">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('tabbed_box', 'mbiz_tabbed_box');

Another solution would be to build a string then return it, without using separate variables.

$out="<div class="tabs-style1"><div class="tabs-navigation"><ul class="tabs-nav">";
    if ($tab1) $out .= '<li>whatever</li>';
    if ($tab2) $out .= '<li>whatever</li>';
    if ($tab3) $out .= '<li>whatever</li>';
    if ($tab4) $out .= '<li>whatever</li>';
    if ($tab5) $out .= '<li>whatever</li>';
$out .= '</ul></div><div class="tabs-content">' . do_shortcode($content) . '</div></div>';

return $out;