JQuery / Javascript selector loop through array of elements with toggle() or add/removeClass()

I have:

<button id="1"> Button 1 </button>
<span id="s1"> Span 1 </span>

<button id="2"> Button 2 </button>
<span id="s2"> Span 2 </span>

<button id="3"> Button 3 </button>
<span id="s3"> Span 3 </span>

What I need is:

-When click button 1, span 1 shows and when click again it disappears and shows the button 1. -When click button 2, span 2 shows and when click again it disappears and shows the button 2. -When click button 3, span 3 shows and when click again it disappears and shows the button 3.

I currently have a loop creating the html, assigning ids in an array and set to a class (.off) with display: none by default. For example:

$.(body).append( '<button id="'+[i]+'">Button'+[i]+'</button>
                  <span id="'+[i]+'" class="off">'

But I am having trouble selecting one by one. I get errors like, either only the first element works, or I click on 1 button and shows all the spans at the same time. My code:

for ( var j = 0; j < id.length; j++ ){
    $('button' ).on("click", function(e) {
        $('span' ).removeClass('off').addClass('on');
        $(this).on("click", function(e) {
             $('span').removeClass('on').addClass('off');             
         });
    });
});