title: Changing text in DOM dynamically using Javascript
body: <p>Am working on an application whereby I have some data in a Javascript 
  object which I have pulled from the backend. 
  Am trying to iterate through the Javascript object and populate 
  in the DOM inside a ul but it aint working, the ul has existing text that I want
  to change instantly after loop.</p>
  
  <p><strong>Javascript object copied from browser console tab</strong></p>
  
  <pre><code>0: "Mathematics"
  ​
  1: "English"
  ​
  2: "Swahili"
  ​
  3: "Germany"
  </code></pre>
  
  <p><strong>Logic</strong></p>
  
  <pre><code>$.each(planDetails, function (key, value) { 
      $("#packageBenefits ul li" + key).text(value);
  });
  </code></pre>
  
  <p><strong>Markup to populate data into</strong></p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-header"&gt;All subjects&lt;/div&gt;
      &lt;div class="card-body" id="packageBenefits"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;span&gt; Mathematics &lt;/span&gt; &lt;/li&gt;
              &lt;li&gt;lorem ipsum ............... &lt;/li&gt;
              &lt;li&gt;lorem ipsum ............... &lt;/li&gt;
              &lt;li&gt;lorem ipsum ............... &lt;/li&gt;
              &lt;li&gt;lorem ipsum .............. &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>