title: How to wrap two elements in jQuery by respecting their parent?
body: <p>I'm trying to wrap two elements in jQuery. Sometimes there is the case that an exact duplicate of the parent exists which is not visible. In this case the element from the invisible div gets wrapped too but in the visible one:</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>jQuery(document).ready(function($) {
    setTimeout(function() {
      if (!$('#bottom-wrapper').length) {
        let buttons = $('.btn-1, .btn-2');
        buttons.wrapAll('&lt;div id="bottom-wrapper" /&gt;');
      }
      $('#description').remove();
    }, 3000);
  });</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 id="description"&gt;Wait for 3 seconds to see the error - now its not wrapped, after 3 seconds it is&lt;/div&gt;
  &lt;div class="parent"&gt;
    &lt;button class="btn-1"&gt;To cart&lt;/button&gt;
    &lt;button class="btn-2"&gt;To checkout&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="parent" style="visibility:hidden;"&gt;
    &lt;button class="btn-1"&gt;To cart&lt;/button&gt;
    &lt;button class="btn-2"&gt;To checkout&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I change this so that it gets wrapped in each element? The problem is that the elements are generated in my code so there is no way to select them by class or something like this...</p>
  <p><strong>UPDATE</strong>
  The timeout is not in the actual code!!! It's only here to show you the problem a bit better.</p>