Tabindex is not working?
<p>I've been reading the documentation of how to apply the tabindex feature in HTML to elements and I'm trying to add it to the "empty-btn" button in my HTML below but the tabbing feature goes straight to my social media icons instead. Why is this? How do I fix this so that it tabs on the button before the icons? </p>

<p>HTML</p>

<pre><code>   &lt;p class="designations"&gt;
                            &lt;%= profile.designations %&gt;
                                            &lt;button type="button" class="empty-btn" tabindex="0"&gt;
                                                    &lt;div class="designations-popup"&gt;
                                                            &lt;div class="popup-content"&gt;
                                                                    &lt;h5&gt;&lt;%- theme_data.designation_pop_title %&gt;&lt;/h5&gt;
                                                            &lt;p&gt;&lt;%- theme_data.designation_pop_msg %&gt;&lt;/p&gt;
                                                            &lt;/div&gt;
                                                    &lt;/div&gt;
                                            &lt;/button&gt;
                    &lt;/p&gt;
                &lt;% } %&gt;
                                    &lt;h2 itemprop="jobTitle"&gt;
                                            &lt;%= theme_data.job_title.replace(/(®)/ig, "&lt;sup&gt;$1&lt;/sup&gt;") %&gt;
                                    &lt;/h2&gt;
                            &lt;/section&gt;
                                    &lt;% if (profile.networks) { %&gt;
                                            &lt;!-- Social Icons --&gt;
                                            &lt;div class="hidden-sm hidden-xs pull-right social-icons"&gt;
                                                    &lt;% if (profile.networks.facebook_url ) { %&gt;
                                                    &lt;a href="&lt;%- profile.networks.facebook_url %&gt;" target="_blank"&gt;
                                                            &lt;img alt="Facebook Logo" src="./images/facebook.png"&gt;
                                                    &lt;/a&gt;
                                                    &lt;% } %&gt;
                                                    &lt;% if (profile.networks.twitter_url ) { %&gt;
                                                    &lt;a href="&lt;%- profile.networks.twitter_url %&gt;" target="_blank"&gt;
                                                            &lt;img alt="Twitter Logo" src="./images/twitter.png"&gt;
                                                    &lt;/a&gt;
                                                    &lt;% } %&gt;
                                                    &lt;% if (profile.networks.linkedin_url ) { %&gt;
                                                    &lt;a href="&lt;%- profile.networks.linkedin_url %&gt;" target="_blank"&gt;
                                                            &lt;img alt="LinkedIn Logo" src="./images/linkedin.png"&gt;
                                                    &lt;/a&gt;
                                                    &lt;% } %&gt;
                                            &lt;/div&gt;
                                    &lt;% } %&gt;
</code></pre>