html - How to Stop infinite animation in javascript -

i have develop animation can see below.... animation goes infinite time.. have conditions.. 1.) if click button ball goes , down have stop on default position... 2.)if u click button second time shows 2 balls colliding... how rectify issues through javascript

function animationone(cobj) {      var circle = document.getelementbyid("circle" + cobj);      var h = window.innerheight - 50;        var btmpos = 0;      var isforward = true;        setinterval(function () {                    if (btmpos < h && isforward) {              btmpos += 10;              isforward = true;            } else {              if (btmpos > 20) {                  isforward = false;                  btmpos -= 10;              } else {                  btmpos += 10;                  isforward = true;              }            }          circle.style.bottom = btmpos + "px";      }, 100);  };

body{      background-color: gray;      position: relative;      min-height: 558px;  }  .overall{      position: absolute;      bottom: 0;      width: 100%;  }  .box, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{      width: 9%;      text-align: center;      float: left;      margin-right: 5px;  }    #circle1, #circle2, #circle3, #circle4, #circle5, #circle6, #circle7, #circle8, #circle9, #circle10{      width: 45px;      height: 45px;      background-color: violet;      z-index: 10;      border-radius: 30px;      margin-left: auto;      margin-right: auto;      display: table;      position: absolute;      bottom: 16px;  }

<div class="overall">              <div class="box">                  <p id="circle1"></p>                  <hr>                  <button onclick="animationone(1)">button 1</button>              </div>                <div class="box2">                  <p id="circle2"></p>                  <hr>                  <button onclick="animationone(2)">button 2</button>              </div>                <div class="box3">                  <p id="circle3"></p>                  <hr>                  <button onclick="animationone(3)">button 3</button>              </div>                            <div class="box4">              <p id="circle4"></p>              <hr>              <button onclick="animationone(4)">button 4</button>          </div>                            <div class="box5">              <p id="circle5"></p>              <hr>              <button onclick="animationone(5)">button 5</button>          </div>                            <div class="box6">              <p id="circle6"></p>              <hr>              <button onclick="animationone(6)">button 6</button>          </div>                            <div class="box7">              <p id="circle7"></p>              <hr>              <button onclick="animationone(7)">button 7</button>          </div>                            <div class="box8">              <p id="circle8"></p>              <hr>              <button onclick="animationone(8)">button 8</button>          </div>                            <div class="box9">              <p id="circle9"></p>              <hr>              <button onclick="animationone(9)">button 9</button>          </div>                            <div class="box10">              <p id="circle10"></p>              <hr>              <button onclick="animationone(10)">button 10</button>          </div>            </div>

i'm not sure if understood question or not based on interactions assuming want animations run without creating more.

i cleared interval in order achieve this. otherwise new interval created on top of existing one. each button has it's own animation intervals separate 1 another.

i assigned interval attribute each button store value. it's best store element data object. html onclick events passing in reference of element hence this in arguments list.

function animationone(cobj, button) {    if (button.interval) clearinterval(button.interval); // clear interval if interval exists    var circle = document.getelementbyid("circle" + cobj);    var h = window.innerheight - 50;      var btmpos = 0;    var isforward = true;      var interval = setinterval(function() {        if (btmpos < h && isforward) {        btmpos += 10;        isforward = true;        } else {        if (btmpos > 20) {          isforward = false;          btmpos -= 10;        } else {          btmpos += 10;          isforward = true;        }        }      circle.style.bottom = btmpos + "px";    }, 100);    button.interval = interval; // set new interval reference  };

body {    background-color: gray;    position: relative;    min-height: 558px;  }  .overall {    position: absolute;    bottom: 0;    width: 100%;  }  .box,  .box2,  .box3,  .box4,  .box5,  .box6,  .box7,  .box8,  .box9,  .box10 {    width: 9%;    text-align: center;    float: left;    margin-right: 5px;  }  #circle1,  #circle2,  #circle3,  #circle4,  #circle5,  #circle6,  #circle7,  #circle8,  #circle9,  #circle10 {    width: 45px;    height: 45px;    background-color: violet;    z-index: 10;    border-radius: 30px;    margin-left: auto;    margin-right: auto;    display: table;    position: absolute;    bottom: 16px;  }

<div class="overall">    <div class="box">      <p id="circle1"></p>      <hr>      <button onclick="animationone(1, this)">button 1</button>      <!-- note agrument "this" -->    </div>      <div class="box2">      <p id="circle2"></p>      <hr>      <button onclick="animationone(2, this)">button 2</button>    </div>      <div class="box3">      <p id="circle3"></p>      <hr>      <button onclick="animationone(3, this)">button 3</button>    </div>      <div class="box4">      <p id="circle4"></p>      <hr>      <button onclick="animationone(4, this)">button 4</button>    </div>      <div class="box5">      <p id="circle5"></p>      <hr>      <button onclick="animationone(5, this)">button 5</button>    </div>      <div class="box6">      <p id="circle6"></p>      <hr>      <button onclick="animationone(6, this)">button 6</button>    </div>      <div class="box7">      <p id="circle7"></p>      <hr>      <button onclick="animationone(7, this)">button 7</button>    </div>      <div class="box8">      <p id="circle8"></p>      <hr>      <button onclick="animationone(8, this)">button 8</button>    </div>      <div class="box9">      <p id="circle9"></p>      <hr>      <button onclick="animationone(9, this)">button 9</button>    </div>      <div class="box10">      <p id="circle10"></p>      <hr>      <button onclick="animationone(10, this)">button 10</button>    </div>    </div>