How to make tabindex localized within a div

I'm trying to make examples of what is bad practice in terms of accessibility. I have three examples that have to do with Keyboard Focus. The first example is that you aren't able to see focus on a set of buttons. The second example is that focus order isn't logical. In order to accomplish the second and third examples, I have to add in the tabindex attribute to some of the tags.

I'm having a little trouble understanding how I might be able to tab through the first 4 buttons (in order), then move onto the form (in order of the first field, the submit, the third field, and then second field), and then finally onto a div of links (in order, but has a loop).

What happens currently is, tabbing through the first 4 buttons works, but then focus goes to the url address bar and then onto the input fields. I want the focus order to go from div to div.

I hope that makes a little sense, I don't have too much experience in webdev. Here's the Codepen and html for reference! Thank you!

Codepen: http://ift.tt/2sNKL33

<style>
button:focus {
  outline: none !important;
  text-decoration: none !important;
}
</style>

<p>Unfocusable buttons</p>
<div class="buttons">
  <button>button 1</button>
  <button>button 2</button>
  <button>button 3</button>
  <button>button 4</button>
</div>

<p>Unintuitive Focus Order</p>
<div class="inputs">
  <form>
    <label>input 1</label>
    <input type="text" tabindex="1"><br>
    <label>input 2</label>
    <input type="text" tabindex="4"><br>
    <label>input 3</label>
    <input type="text" tabindex="2"><br>
    <input type="submit" value="Submit" tabindex="3">
  </form>
</div>

<p>Focus Trap (Loop)</p>
<div class="links">
  <a href="#" tabindex="5">link 1</a>
  <a href="#" tabindex="6">link 2</a>
  <a href="#" tabindex="7" onFocus="this.tabindex=4;" onBlur="this.tabindex=7;">link 3</a>
</div>