Jquery function not changing correct images

I'm sorry for the title, I couldn't think of a better name.

So I have 2 columns in my table. One is called "designate" and the other is called "owner". There is a picture in these columns (when done pulling from the database to change people, but for now I'm just working on the front end).

Now when I click on one of these pictures a row of more pictures appears, this should allow the user to change who is the "owner" of the task or who wants to "assign" the task.

When you select a person from this row, the row should hide and replace the image with the selected person (the random image at the moment).

My problem: When you click on the "assign" image, I select another image from the row. This works great, it hides the row and changes the image in the destination column. However, if I now click on the image in the "owner" column then select the image, it changes it with the image in the "assign" column.

So it looks like the first one I click on is the one that changes from now on.

JSFIDDLE https://jsfiddle.net/juxgo0gb/

here is my jsfiddle if you want to try it quickly if I don't go past the relevant code snippets at the bottom. (in jsfiddle I changed images to tiny links)

<table id="create-table">
  <tr>
      <th>Assign</th>
      <th>Owner</th>
  </tr>
  <tr>
      <td>
          <div class="empty-picture-holder">
              <img data-column="assigner" class="selectedImg" width="40" height="40" src="{{ asset('img/me.jpg') }}" />
          </div>
      </td>
      <td>
          <div class="empty-picture-holder">
              <img data-column="owner" class="selectedImg" width="40" height="40" src="{{ asset('img/me.jpg') }}" />
          </div>
      </td>
  </tr>

      

        
        
        
      

    

This is a line of images:

<div class="col-md-12 people-choose" data-column="">
    <img width="40" height="40" data-person="matt" src="{{asset('img/me.jpg') }}" />
   <img width="40" height="40" data-person="rhian" src="{{asset('img/rhian.jpg') }}" />
   <img width="40" height="40" data-person="crystal" src="{{asset('img/crystal.jpg') }}" />
   <img width="40" height="40" data-person="scarlett" src="{{asset('img/scarlett.jpg') }}" />
</div>

      

        
        
        
      

    

Jquery:

$(document).on('click',  '.selectedImg', function(){
    $('.people-choose').show();
    $('.people-choose').attr('data-column',$(this).data('column'));
});

      

        
        
        
      

    

Now when I click on the image in the row it gets the data-person attribute to pull the image to the right later. Then we iterate over all the images in the table and find the one that has a data column = "assignor" or "owber"

$('.people-choose img').click(function(){
    var $person = $(this).data('person');
    $('.selectedImg').each(function(){
        if($('.people-choose').data('column') == 'assigner'){
            if($(this).data('column') == 'assigner'){
                $('.people-choose').attr('data-column','');
                console.log('assigner');
                $(this).parents('.empty-picture-holder').append('<img data-column="assigner" class="selectedImg" width="40" height="40" src="http://localhost:8888/img/'+ $person +'.jpg">');
                $(this).remove();
            }
        }
        if($('.people-choose').data('column') == 'owner'){
            if($(this).data('column') == 'owner'){
                $('.people-choose').attr('data-column','');
                console.log('owner');
                $(this).parents('.empty-picture-holder').append('<img data-column="owner" class="selectedImg" width="40" height="40" src="http://localhost:8888/img/'+ $person +'.jpg">');
                $(this).remove();
            }
        }
    });

});

      

        
        
        
      

    

EDIT:

okay, so just messing around with the code, I think I know this problem, but don't know how to solve it.

$('.people-choose img').click(function(){
    var $person = $(this).data('person');
    $column = $('.people-choose').data('column');
    var $new =$('#create-table').find("[data-column='" + $('.people-choose').data('column') + "']");
    console.log($new);
});

      

        
        
        
      

    

using this essentially does the above. Now in the console it logs in the same way every time. Therefore the data-column attribute on .people-select does not change, although I change it every time I click on .selectedImg.