title: Jquery sort spans inside div
body: <p>I ve dynamically generated spans which are inside a div.
  so structure is like this:</p>
  <pre><code>&lt;div class=&quot;col-12 bk_slot_div1 &quot;&gt;
    &lt;span&gt;
      &lt;span class=&quot;bk_slot_div&quot; style=&quot;padding: 6px 11px;background: #FFFFFF;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer&quot; id=&quot;8&quot; t-att-data-slot_plans=&quot;12:45&quot;&gt;12:45&lt;/span&gt;
    &lt;/span&gt;
    &lt;span&gt;
      &lt;span class=&quot;disabled disable_msg&quot; style=&quot;padding: 6px 11px;background: #e9ecef;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer&quot; id=&quot;7&quot; t-att-data-slot_plans=&quot;12:00&quot;&gt;12:00&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>shows like this:</p>
  <p><a href="https://i.stack.imgur.com/hTAsn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hTAsn.png" alt="enter image description here" /></a></p>
  <p>From jquery:</p>
  <pre><code>var bk_class = $('.bk_slot_div1');
  bk_class.append('&lt;span&gt;&lt;span class=&quot;bk_slot_div&quot; style=&quot;padding: 6px 11px;background: #FFFFFF;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer&quot; id=&quot;8&quot; t-att-data-slot_plans=&quot;12:45&quot;&gt;12:45&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span class=&quot;disabled disable_msg&quot; style=&quot;padding: 6px 11px;background: #e9ecef;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer&quot; id=&quot;7&quot; t-att-data-slot_plans=&quot;12:00&quot;&gt;12:00&lt;/span&gt;&lt;/span&gt;');
  </code></pre>
  <p>when appying sort:</p>
  <pre><code>$(&quot;.bk_slot_div1 span &gt; span&quot;).sort(function (elem1, elem2) {
      return parseInt(elem1.id) &gt; parseInt(elem2.id);
  }).each(function () {
      var element = $(this);
      element.remove();
      $(element).appendTo(&quot;.bk_slot_div1&quot;);
  });
  </code></pre>
  <p>It produces multiple repetition of same span. Also the parent span is gone missing. Any idea what i am doing wrong? Sorry for bad English.</p>
  <p><a href="https://i.stack.imgur.com/dsw6G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dsw6G.png" alt="enter image description here" /></a></p>
  <p>This post is also related to my requirement. Bt i still failed to find what i m doing wrong.</p>
  <p><a href="https://stackoverflow.com/questions/35198302/sort-dynamically-created-div-based-on-their-id-using-jquery">Sort dynamically created div based on their id using jquery</a></p>
  <p>Example</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 bk_class = $('.bk_slot_div1');
  bk_class.append('&lt;span&gt;&lt;span class="bk_slot_div" style="padding: 6px 11px;background: #FFFFFF;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer" id="8" t-att-data-slot_plans="12:45"&gt;12:45&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span class="disabled disable_msg" style="padding: 6px 11px;background: #e9ecef;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer" id="7" t-att-data-slot_plans="12:00"&gt;12:00&lt;/span&gt;&lt;/span&gt;');
  
  $(".bk_slot_div1 span &gt; span").sort(function (elem1, elem2) {
      return parseInt(elem1.id) &gt; parseInt(elem2.id);
  }).each(function () {
      var element = $(this);
      element.remove();
      $(element).appendTo(".bk_slot_div1");
  });</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="col-12 bk_slot_div1 "&gt;
    &lt;span&gt;
      &lt;span class="bk_slot_div" style="padding: 6px 11px;background: #FFFFFF;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer" id="8" t-att-data-slot_plans="12:45"&gt;12:45&lt;/span&gt;
    &lt;/span&gt;
    &lt;span&gt;
      &lt;span class="disabled disable_msg" style="padding: 6px 11px;background: #e9ecef;font-size: 14px;color: #555555;text-align: center;border: 1px solid #979797;border-radius: 4px;cursor: pointer" id="7" t-att-data-slot_plans="12:00"&gt;12:00&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>