How can I change multiple elements by each array value?

When I check my checkbox and then click the "mark as done" button then the status_result is changing to done. It works when I do it for each single. But not if I check all. Then only one status_result is changing:

$('.productdetails-table input[type="checkbox"]').change(function () {
        var unchecked = [];
        $.each($("input[type='checkbox']:checked"), function () {
            unchecked.push($(this).val());
        });
        $(".selected-products").val(unchecked.join(", "));
    });

  
$(document).on('click', '.edit-done', function () {
    var array = $('.selected-products').val().split(",");
        $.each(array,function(i){
            $(".productdetails[data-product_id='" + array[i] + "']").find(".status_result").html('<span style="background-color: #00c0ef" class="label label-primary">done</span>');    
        });
  });

<script src="http://ift.tt/1oMJErh"></script>

<li class="pull-right" style="padding:6px 8px; margin-right:-5px;">
      <button style="display: block;" type="button" class="edit-checked edit-done btn btn-block btn-info"><i class="fa fa-check-square-o" aria-hidden="true"></i>Mark as "done"</button>
 </li>
                            
 <input name="selected-products" class="selected-products" type="text">
<table class="productdetails-table table table-bordered table-hover " style="cursor:pointer">
<tbody>
<tr>
   <th>Check</th>
   <th>Status</th>
</tr>

<tr class="productdetails" data-product_id="93"><td><input class="check-parent" value="93" type="checkbox"></td><td class="status_result detail"  ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>
<tr class="productdetails" data-product_id="92" data-table="productdetails"><td class="check close_sidebar"><input value="92"  type="checkbox"></td><td class="status_result" ><span style="background-color: #368cbe" class="label label-primary">pending</span></td></tr>