title: Refresh javascript's function without using Recursion
body: <p>I'm trying to create a simple form where i can add more text field after current text field.</p>
  
  <p>And also i can add more field from the new field that ive added before (im using Recursion for this).</p>
  
  <p>Problems come when i click the add on the first field, it creates more then 1 new fields (this happens because of recursion)</p>
  
  <p>how do i refresh javascripts function without calling it again and again?</p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div class="line-input"&gt;
    &lt;input type='text' class='ipt-txt'&gt;
    &lt;input type='submit' class='btn-smt' value="add new"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS : </p>
  
  <pre><code>$(document).ready(function(){
      callFunction();
  });
  
  function callFunction(){
      $(".btn-smt").click(function(e){
      $(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
      callFunction();
    });
  };
  </code></pre>
  
  <p>JSFiddle : <a href="https://jsfiddle.net/1uofya3k/" rel="nofollow noreferrer">https://jsfiddle.net/1uofya3k/</a></p>
  
  <p>Thanks!</p>