How to add ID attribute to each submenu?

In your Walker_N_Menu class’s start_lvl() method, you’re setting the <ul>‘s id to submenu1. You can change this (using, in this example, the $depth parameter passed to start_lvl()) to be unique:

function start_lvl( &$output, $depth = 0, $args = array() ) {
    // Depth-dependent classes.
    $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
    $display_depth = ( $depth + 1); // because it counts the first submenu as 0
    $classes = array(
        'sub-menu',
        'collapse',
        'menu-depth-' . $display_depth
    );
    $button = ( $depth > 0 ) ? '<button class="btn-submenu" data-target="#submenu1-' . $depth . '"><ion-icon name="chevron-forward-outline" role="img" class="md hydrated" aria-label="chevron forward outline"></ion-icon></button>' : '<button class="btn-submenu" data-target="#submenu1-' . $depth . '"><ion-icon name="chevron-down-outline" role="img" class="md hydrated" aria-label="chevron down outline"></ion-icon></button>';
    $class_names = implode( ' ', $classes );

    // Build HTML for output.
    $output .= "\n" . $indent . $button . "\n" . $indent . '<ul id="submenu1-' . $depth . '" class="' . $class_names . '">' . "\n";
}

If you need this for more than one menu in a page, you should be able to pass in a menu prefix in the $args array to the start_lvl() method.

As to why your add_filter() code doesn’t seem to work properly: functions hooked to filters need to return a value, generally speaking, and your function isn’t returning anything. Also, running a for() loop over the values won’t do what you’re expecting; I would suggest that, if you were returning a value (ie, return $menu; at the end of the function), you’d find all the values would be 9.

Related Posts: