At a loss — How do I get my animation to loop a set number of times before stopping?

I'm a beginner. Sorry! But I've created an animation that works. It's simple and very straight forward.

But it doesn't do what I want which is to start when I click "Start" then loop three times and stop at the end of the animation at frame 58.

Here's what I have:

in Layer 1, frame 1 of the animation I have this:

var _this = this;
_this.stop();

In Layer 1, frame 2 and to the end (frame 58 is end) I have this:

if (!this.looped) this.looped = 1;

if (this.looped++ > 3) this.gotoAndStop('58');

In Layer 2, frame 1 and to the end I have this (and a "Start" button):

var _this = this;
_this.button_2.on('click', function(){
_this.gotoAndPlay('2');
});

Animation starts when I click "Start" but it only plays once, then goes back to beginning and stops. It seems my "Stop" in Layer 1, frame 1 overrides the loop command? But what do I do to prevent the animation to auto play on load if I don't have a Stop action in there?