Click for toggle checkbox, becomes double click

I current making a checkbox with a label attached to it. I use the for="" attribute to link the click for the checkbox.

I also have a jQuery function which on click for the checkbox and labels container does a slide toggle for a text input field.

Here comes the issue. When i click the checkbox, only one click is detected and the text field slides down nicely. However when i click the label it seems that a double click is happening so the text field slides down and then immediately back up.

I have an id of "toggle-checkbox" on my checkbox and a for="toggle-checkbox" on my label and i suspect that somehow triggers an extra click.

Any help would be deeply appriciated :)

HTML:

<div class="cart-summary__coupon-code">
  <div class="form-group js-coupon-code">
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox">
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label>
  </div>
</div>

<div class="coupon-code">
  <input type="text" />
</div>

JavaScript:

jQuery('.js-coupon-code').click(function() {
    $( ".coupon-code" ).slideToggle( "slow", function() {
    });
});

CSS:

.coupon-code {
  display: none;
}

I have created a codepen where the issue can be reproduced. DEMO