Creating multiple enclosing shortcodes and fixing JS issues on click

Code:-

function more_shortcode( $atts , $content = null ){
    return '<div id="more-outer-'.$atts['id'].'"><a href="#" id="more-link-'.$atts['id'].'">More</a><div id="more-inner">'. $content .'</div></div>';
}
add_shortcode( 'more', 'more_shortcode' );

Usage:-

[more id='1']This is one.[/more]

[more id='2']This is two.[/more]

[more id='3']This is three.[/more]

Output:-

<div id="more-outer-1"><a href="#" id="more-link-1">More</a><div id="more-inner">This is one.</div></div>
<div id="more-outer-2"><a href="#" id="more-link-2">More</a><div id="more-inner">This is two.</div></div>
<div id="more-outer-3"><a href="#" id="more-link-3">More</a><div id="more-inner">This is three.</div></div>

JS Script:-

<script>
    jQuery(document).ready(function($){
        $(document).on('click', '#more-outer-1', function(e){
                /* Do action for click on div with id more-outer-1 */
            });
        $(document).on('click', '#more-outer-2', function(e){
                /* Do action for click on div with id more-outer-2 */
            });
        $(document).on('click', '#more-outer-3', function(e){
                /* Do action for click on div with id more-outer-3 */
            });
    });
</script>