Check checkbox by index in another list

I have an unordered list with div elements and a hidden checkbox list, each with the same number of items.

How can I check an item in list 2 when I click a div in list 1 with the same index?

<ul class="product-list">
  <li>
    <div>Red</div>
  </li>
  <li>
    <div>White</div>
  </li>
  <li>
    <div>Blue</div>
  </li>
</ul>

<ul class="product-checkbox>
  <li>
    <input type="checkbox">Red
  </li>
  <li>
    <input type="checkbox">White
  </li>
  <li>
    <input type="checkbox">Blue
  </li>
</ul>

So here if I click Red in the first UL, Red gets checked in the second UL.

I can get the index of the LI in the first but not apply that index to check the box

$(document).on('click', '.product-list li', function() {
    var index = $(this).index();

    if ($('.product-checkbox #checkbox index').prop('checked')) {
        $('.product-checkbox #checkbox index').prop('checked', false);
    } else {
        $('.product-checkbox #checkbox index').prop('checked', true);
    }            

});