How can I put my arrow next to the header while the switch is still working?

Question

I like to have my arrow (which I switch to click) next to my heading.
I tried to put the arrow <div>in the H1 tag, but the switch does not work.
Can someone help me?
I prefer to 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>

Run code

Answer 1

div h1 display: inine-block, . div a. , jQuery, find() next(). :

$('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>

Answer 2

#module-tab-1 .left-image.hi inline-block. :

#module-tab-1 {
  display: inline-block;
}

.left-image.hi {
  display: inline-block;
}

:

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

#module-tab-1 {
  display: inline-block;
}

.left-image.hi {
  display: inline-block;
}

.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>

, !