If checkbox is checked, change only style of that item

I'm making a checkbox list and when someone checks a checkbox, I need it to change text from pending to done and also change the background to green. I've managed to make all that work with jQuery.

Except it styles every checkbox container and not just the one checked. How can I fix that? And how can I make it change back to its original style if someone unchecks the checkbox again after?

This is my code so far:

$('.custom-control-input').click(function(){
    if (this.checked) {
        $('.pending').css('display', 'none')
        $('.done').css('display', 'block')
        $('.list-group-item').css('background-color','#4CAF50')
    }
})

.pending {
  display: none;
}

<script src="http://ift.tt/1oMJErh"></script>
<link rel="stylesheet" href="http://ift.tt/2iMplwr" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<ul class="list-group">
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
</div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
  </div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
  </div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
</div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
</ul>