title: Dynamically appending id's to dynamic div's in jquery
body: <p>I'm trying to dynamically append id's to the dynamically generated div's . Initially I have the first div with class "check" &amp; then after a "show more" button is clicked , we another div with same class gets rendered. There's an ajax call here. Here's the structure: </p>
  
  <pre><code>&lt;div class= "check"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Show more clicked: 
  AJAX Call</p>
  
  <pre><code>&lt;div class= "check"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Show more clicked:
  AJAX Call </p>
  
  <pre><code>&lt;div class= "check"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to dynamically append id's to the main &amp; nested div. So I want the following result: </p>
  
  <pre><code>&lt;div class= "check" id = "check_0" &gt;
      &lt;div id = "test0"&gt;
    &lt;script type = 'text/javascript'&gt;
          thirdpartyfunction(function(){});
    &lt;/script&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class= "check" id = "check_1" &gt;
      &lt;div id = "test1"&gt;
    &lt;script type = 'text/javascript'&gt;
          thirdpartyfunction(function(){});
    &lt;/script&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class= "check" id = "check_2" &gt;
      &lt;div id = "test2"&gt;
    &lt;script type = 'text/javascript'&gt;
          thirdpartyfunction(function(){});
    &lt;/script&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I tried changes id of the first div always. What the best way to go about this problem?</p>
  
  <p>I tried something like this:(Pseudocode)</p>
  
  <pre><code>var count = 0; 
  if(div with count id=0 does not exist then .. )
  {
  $(".check").attr("id","check_"+count);
  count++;
  }
  </code></pre>
  
  <p>Third party function
      
       thirdpartfunction.track(function() { test("test");}) 
      </p>