title: How to create a function to get next id of element in jquery and call this function?
body: <p>I've created a custom function <code>goToNext()</code> it's just supposed to alert the id of the next element that i've clicked on.</p>
  
  <p>I want to call this custom function inside another click function.</p>
  
  <p>For now when I click on first element it alerts <code>id_2</code> (next from the first, so it's ok) but if you click the second element it doesn't return <code>id_3</code> (like it's supposed to be) but it return <code>id_2</code> same if you click on the last element (supposed to alert the first)</p>
  
  <p>this is my <a href="https://jsfiddle.net/pitmit/y0dc5ooc/3/" rel="nofollow">jsfiddle example here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function goToNext() {
    var get_next_id = $('.btn').next().attr("id");
    alert(get_next_id);
  }
  
  $('.btn').click(function() {
    goToNext();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    width: 50px;
    height: 50px;
    margin: 10px auto;
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="btn" id="id-1"&gt;
    1
  &lt;/div&gt;
  &lt;div class="btn" id="id-2"&gt;
    2
  &lt;/div&gt;
  &lt;div class="btn" id="id-3"&gt;
    3
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>