Selecting the second checkbox also selects the first one

I have a form with two checkboxes that allows the user to select yes or no based on the question asked. Now when I select the second checkbox, the first checkbox is also selected which is what I don't want. When I say the area within the second container is clicked, you have to directly click on the checkbox area (the label or the rest of the container won't select the checkbox like the first checkbox and it's container will). So when you click the second checkbox directly it also checks the first.

My question is, why is it allowing me to check anywhere within the first container, but not the second container? Additionally, why is the first being selected when I only want to select the second one?

HTML (disregard the inline CSS that will be moved over to stylesheet.css):

<div style="background: #FFF; width: 1200px; height: 700px; display: block; margin: 100px auto; overflow: auto;">
    <div style="display: block; margin: 30px auto; height: 400px; width: 1000px">
      <h4 style="font-family: 'Lato', sans-serif; margin-top: 90px; letter-spacing: 1px;"><strong>Blah blah blah?</strong></h4>

      <div class="inline field" style="max-width: 500px;">

        <form role="form" action="" style="margin-top: 60px;">
          <div class="checkbox" style="height: 50px; border: 2px solid #f8f8f8; border-radius: 2px;">
            <label for="checkbox1" style="height: 46px; padding-top: 14px; width: 500px;">
              <input type="checkbox" id="checkbox1" class="checkbox-circle" value="true" style="background: red; margin-right: 20px;" />
              Yes</label>
          </div>

          <div class="checkbox" style="height: 50px; border: 2px solid #f8f8f8; border-radius: 2px;">
            <label for="checkbox1" style="height: 46px; padding-top: 14px; width: 500px;">
              <input type="checkbox" id="checkbox1" class="checkbox-circle" value="true" style="background: red; margin-right: 20px;" />
              No</label>
          </div>
        </form>

      </div>
    </div>
  </div>

Image of the form: