title: How to set incremented ID values to div elements created on the fly using jQuery?
body: <p>I have a DIV called <code>.number</code> that holds the number <code>456</code> as text. I basically, create three DIV elements on the fly using jQuery and as text, I set each digit from the <code>div.number</code> to each DIV element. How do I set an incremented ID value to the three DIV elements that are created on the fly?
  And if there is a better way on how to create these three DIV elements on the fly, I'd be glad to expand my knowledge. </p>
  
  <p>I've been trying to make work, but this is really beyond my knowledge...</p>
  
  <p><strong>Javascript/jQuery code</strong>    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var x = 1;
      var result = $('.result');
      var btn = $('button');
  
      btn.on('click', function(){
            var row1 = $('&lt;div class="row" id="row__'+x+'"&gt;&lt;/div&gt;');
            var row2 = $('&lt;div class="row" id="row__'+x+'"&gt;&lt;/div&gt;');
            var row3 = $('&lt;div class="row" id="row__'+x+'"&gt;&lt;/div&gt;');
  
            var stringToSplit = $('.number').text();
             
            row1.text(stringToSplit.charAt(0) + ' -&gt; #' + x);
            row2.text(stringToSplit.charAt(1) + ' -&gt; #' + x);
            row3.text(stringToSplit.charAt(2) + ' -&gt; #' + x);
  
            result.append(row1, row2, row3);
            $(this).hide();
            x++;
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;div class="number"&gt;456&lt;/div&gt;
  
      &lt;div class="result"&gt;
  
      &lt;/div&gt;
      &lt;button&gt;Get&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect the output of <code>4 -&gt; #1</code> in the first DIV, <code>5 -&gt; #2</code> in the second DIV, <code>6 -&gt; #3</code> in the third DIV,</p>