title: How would i apply multiple function over an element and store the element itself for a custom graph in javascript?
body: <p>I am trying to create a graph for some links , when you click them to count the clicks and also in the same time Create a new element, more specific a DIV element itself. Now first i will add the code so that you can have a better look on it and then try to explain. My</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;input type="submit" id="btn" value="add element"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;input type="submit" id="inc" value="increase element"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;p id="result"&gt;&lt;/p&gt;
  
  &lt;div id="box"&gt;&lt;/div&gt;
  
   &lt;script src="main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>as for the css i have this code, just basic styling</p>
  
  <pre><code>    #box{
      position: absolute;;
      bottom: 10px;
      left:0px;
      width: 100%;
      height: 400px;
      background-color: red;
  
  }
  .div{
      margin-left: 10px;
      position: relative;
      left: 0px;
      top: 380px;
      display: inline-block;
      width:10px;
      height: 0px;
      background-color: green;
  }
  </code></pre>
  
  <p>Now the java script file that i have for main.js is this one :</p>
  
  <pre><code>    var btn=document.getElementById("btn");
  var box=document.getElementById("box");
  var link=document.getElementById("inc");
  
  var para=document.getElementById("result");
  
  
  btn.onclick=function(){
  
      var div=document.createElement("div");
  
      div.classList.add("div");
  
      div.setAttribute("class","div");
  
      box.appendChild(div);
  
      var click=0;
  
      link.onclick=function(){
  
  
          var setClick=click++;
  
  
          var h=div.offsetHeight;
  
          var newheight=1;
  
          div.style.height=h+newheight+"px";;
  
          para.innerHTML=setClick;
  
        }
  }
  </code></pre>
  
  <p>Now what the goal of this code is :</p>
  
  <p>1) I am trying to create a new element whenever i  press the input button add element which creates a new Div element in the div with the id "box". After that  </p>
  
  <p>2) i am trying to increase the height of that newly created div always dynamically by 5px or any other value by clicking the next input button increase element. Which means for each div that i create separately.  </p>
  
  <p>3) and after that what i want to do is to store those values in local storage , whether it is suitable or maybe not so that after refresh i want loos the div box together with the click count .</p>
  
  <p>Now the code works well except that i am running to some issues .
  The first problem occurs when i create the first div , it increase the height normally upwards until the click 15 which then starts the increase the height downwards, the other divs  that are created are ruining normally. As for the other problem the click always.
  So please could someone help me out with the coding and tell me weather i do something wrong and how to correct that. What would be the steps by creating such a code with avoiding.
  Thanks anyone for the help.</p>