How can i put my arrow next to the header with the toggle still working?

Question

I like to have my arrow (which i toggle on click) next to my headertext.
I tried to put the arrow <div> into the H1 tag, but the toggle doesn't work then.
Could someone help me?
I prefer you add the edited snippet to your answer

$('a[id^="module-tab-"]').click(function() {
  $(this).next('.hi').toggleClass("left-image right-image");
});

.left-image {
  background-image: url('http://i.stack.imgur.com/euD9p.png');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}
.right-image {
  background-image: url('http://i.stack.imgur.com/dzs9m.png');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<table>
  <tr style='background-color: lightgray; min-height: 200px;'>
    <td colspan='10'>
      <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'><h1 style='margin-bottom: 0px;'> Gearchiveerde Storingen </h1></a>
      <div class='left-image hi'></div>
    </td>
  </tr>
</table>

Answer 1

To achieve this you need to make the div and the h1 display: inine-block so they can sit alongside each other. You also can move the div inside the a element. Finally you need to then amend the jQuery to use find() instead of next(). Try this:

$('a[id^="module-tab-"]').click(function() {
  $(this).find('.hi').toggleClass("left-image right-image");
});

h1 {
  display: inline-block;
}
div.hi {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  display: inline-block;
}
.left-image {
  background-image: url('http://i.stack.imgur.com/euD9p.png');
}
.right-image {
  background-image: url('http://i.stack.imgur.com/dzs9m.png');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<table>
  <tr style='background-color: lightgray; min-height: 200px;'>
    <td colspan='10'>
      <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'>
        <h1 style='margin-bottom: 0px;'>Gearchiveerde Storingen</h1>
        <div class='left-image hi'></div>
      </a>
    </td>
  </tr>
</table>