Select Checkbox and maintain CSS styling

Question

Dear ones, I have stylized my checkbox, but I would like to be able to select more than one option while maintaining the style of CSS which I created.Only due to my CSS rule, this is selecting only for the first item.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
input[type=checkbox] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c8c6c6;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

input[type=checkbox]+label:before {
  font-family: FontAwesome;
  display: inline-block;
  font-size: 19px;
  margin: 10px 0px 10px 30px;
}

input[type=checkbox]+label:before:focus {
  outline: none;
}

#checkbox {
  display: none;
}

#checkbox+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox:checked+label:before {
  content: '\f046';
}

<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 1</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 2</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 3</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 4</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 5</label>
<br>

Answer 1

Actually your problem is that all id of your code are equal, you have to make a id by element. Take a look at the code below working.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
input[type=checkbox] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c8c6c6;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

input[type=checkbox]+label:before {
  font-family: FontAwesome;
  display: inline-block;
  font-size: 19px;
  margin: 10px 0px 10px 30px;
}

input[type=checkbox]+label:before:focus {
  outline: none;
}

#checkbox1  {
  display: none;
}

#checkbox1+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox1:checked+label:before  {
  content: '\f046';
}
#checkbox2  {
  display: none;
}

#checkbox2+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox2:checked+label:before  {
  content: '\f046';
}
#checkbox3  {
  display: none;
}

#checkbox3+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox3:checked+label:before  {
  content: '\f046';
}
#checkbox4  {
  display: none;
}

#checkbox4+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox4:checked+label:before  {
  content: '\f046';
}
#checkbox5  {
  display: none;
}

#checkbox5+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox5:checked+label:before  {
  content: '\f046';
}

<input type="checkbox" id="checkbox1" name="">
<label for="checkbox1"> Item 1</label>
<br>
<input type="checkbox" id="checkbox2" name="">
<label for="checkbox2"> Item 2</label>
<br>
<input type="checkbox" id="checkbox3" name="">
<label for="checkbox3"> Item 3</label>
<br>
<input type="checkbox" id="checkbox4" name="">
<label for="checkbox4"> Item 4</label>
<br>
<input type="checkbox" id="checkbox5" name="">
<label for="checkbox5"> Item 5</label>
<br>