title: set/update position of element in a dynamically loaded div
body: <p>I have a parent div and a child div. In the parent Div I dynamically load a table with unknown dynamic data length and in my child div, onload the position is set to <code>bottom: 0%;</code>. Now the problem is I want the child div to be set to the parent's bottom 0% every time but every time a new table is added to parent div or maybe table loading was delayed the child div doesn't update to position bottom 0%. To fix this:</p>
  <p><strong>First approached was:</strong></p>
  <pre><code>//didn't work
  function positionUpdate() {
      if ( != 0) {
          document.getElementById('codeRunCon').style.bottom = '0%'
      }
  }
  
  setInterval(() =&gt; {
      positionUpdate()
  }, 100)
  </code></pre>
  <p><strong>second thing I tried:</strong></p>
  <p>Tried loading div2 dynamically after all tables have successfully loaded but this approach won't be applicable for my project because I need to make div2 available as soon as DOM loaded plus if the table loader failed no div2 will be loaded</p>
  <p><strong>Third approach was:</strong></p>
  <pre><code>//I tried using the offset values to find the bottom and apply it but I don't understand how  my bottom is logging a high number like &gt; 500 or so and the bottom position can't be that so I couldn't continue with this method
  console.log($('#div2').offset().top + $('#div2').outerHeight(true))
  </code></pre>
  <p>How can I set div2 position to <code>bottom: 0%</code> all the time</p>
  <p><strong>Note:</strong> table-responsive have been called in div1</p>
  <p><strong>layout of div's</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 myObj = {
    blue: '1',
    green: '2',
    white: '3',
    purple: '4'
    //etc....
  }
  
  $('#div1').ready(function() {
    $("#div1 tbody tr").remove();
    var theTable = "";
    Object.entries(myObj).forEach(entry =&gt; {
      const [key, value] = entry;
      theTable += '&lt;tr class="text-center"&gt;'
      theTable += "&lt;td class='text-center'&gt;&lt;p&gt;" + value + "&lt;/p&gt;&lt;/td&gt;";
    });
    theTable += '&lt;/tr&gt;'
    $('#div1').append(theTable);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #div1 {
    position: absolute;
    bottom: 0%;
    width: 50%;
    height: 100%;
    background-color: green;
  }
  
  #div2 {
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 30%;
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  //NOTE: the bootstrap table-responsive have been called here.
  &lt;div id="table-responsive div1"&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
    &lt;div id="div2"&gt;Set to bottom 0% every time&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>