title: How to set focus on list element in Javascript?
body: <p>I have written my code to show some list of elements on my page. Also, I have written javascript code to slice the elements. So my page has 5 elements displaying initially and every time a user clicks show more link then an additional 5 elements get displayed. My question is when I click showmore I would like to have focus on the 6th element of the list and likewise 11th, 16th etc., Currently, I do not receive the focus on 6th element of the list.</p>
  
  <p>Here is a snippet:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    $('ul li:gt(6)').hide();
    $('#showMore').click(function() {
      $('#payment li:hidden').slice(0, 5).css("display", "list-item");
      $('#payment li:visible:last').focus();
  
      // To illustrate that the last LI gets selected properly
      $('#payment li:visible:last').css({"background" : "red"}); 
  
  
    }); 
  });
  &lt;/script&gt;
  
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul id="payment"&gt;
    &lt;li&gt;xyz&lt;/li&gt;
    &lt;li&gt;xyz&lt;/li&gt;
    &lt;li&gt;xyz&lt;/li&gt;
    &lt;li&gt;xyz&lt;/li&gt;
    &lt;li&gt;xyz&lt;/li&gt;
    &lt;li&gt;xyz&lt;/li&gt;
    &lt;li&gt;xyz&lt;/li&gt;
    &lt;li&gt;xyz&lt;/li&gt;
  &lt;/ul&gt;
  
   &lt;li id="showMore" &gt;
      &lt;a href="javascript:;" &gt;Show More&lt;/a&gt;
    &lt;/li&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>