Issue getting correct $(this) element to append to a list

Question

I have an div field that when clicked in, creates a drop down menu. Whenever you click on the drop down option choices, the name will go to the div field #proposal-type. You can keep clicking to add additional option choices.

My issue is, when I click on the x to remove the choice, I cannot figure out how to get the entire drop-item that was just click on to be removed and fill back into the drop down list. Right now only the x is going back into the option list.

Does anyone have any ideas?

Also, could someone please share a quick pointer of how to get the option box list to go away when I click outside of it? It just remains there no matter what right now.

Here is a fiddle.

$('#proposal-type').click(function() {
  $('#proposal-type-drop').addClass('active');
});
$('#proposal-type').text("Type of Project *");
$('.drop-item-input').on('change', function() {
  var proposalVal = "";
  var proposalHtml = "";
  $('.drop-item-input').each(function() {
    if ($(this).is(":checked")) {
      proposalVal += $(this).val();
      proposalHtml += '<div class="drop-item-selected"><span class="drop-item-close"></span>' + $(this).val() + '</div>';
      $(this).closest('label').fadeOut();
    };
    //else if ($(this).is(":checked") === false) {
    // $(this).closest('label').fadeIn();
    //};
    $('#proposal-type').val(proposalVal).html(proposalHtml);
    $('#proposal-type-drop').removeClass('active');
  });
  //values
  var type = $('.drop-item-input:checked').map(function() {
    return $(this).val();
  }).get().join(', ');
  console.log(type);
});
$(document).on('click', '.drop-item-close', function() {
  console.log("Triggered");
  $(this).fadeOut("medium", function() {
    $(this).detach().appendTo('#proposal-type-drop').fadeIn();
  });
  $(this).is(":checked") === false;
  $(this).closest('label').fadeIn();
  $(this).closest('.drop-item-selected').fadeOut();
});

.panel-input {
  box-sizing: border-box;
  border: 1px solid #858585;
  display: inline-block;
  vertical-align: top;
  width: 45%;
  margin: 1.5% 2% 2.5% 2%;
}

.proposal-input {
  width: 100%;
}

#proposal-type-drop {
  width: 45%;
  display: none;
  position: absolute;
}

#proposal-type-drop.active {
  background: rgba(0, 0, 0, 1);
  display: block;
  height: auto;
  z-index: 1;
}

.drop-item {
  color: #FFF;
  font-size: 1rem;
  padding: 7px 5px;
  font-family: 'Open Sans', sans-serif;
  background: rgba(0, 0, 0, .8);
  display: block;
  width: 100%;
  cursor: pointer;
}

.drop-item-input {
  display: none;
}

.drop-item-selected {
  background: #0085A1;
  color: #333333;
  padding: 5px;
  font-size: .9rem;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  width: auto;
  display: inline-block;
  margin: 0 3px;
}

.drop-item-close {
  display: inline-block;
  background-image: url("http://www.clipartbest.com/cliparts/dT8/xnA/dT8xnAqAc.png");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  height: 10px;
  width: 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: ease 0.1s;
  -webkit-transition: ease 0.1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-input">
  <div id="proposal-type" class="proposal-input"></div>
  <div id="proposal-type-drop">
    <label class="drop-item">Apple<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Apple"></label>
    <label class="drop-item">Banana<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Banana"></label>
    <label class="drop-item">Cake<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Cake"></label>
  </div>
</div>

Answer 1

There are a few issues here, that I've tried to correct. I should warn you right of the start though, this feels very hacked together as I didn't want to try and rewrite your code, you might want to look into a different approach, maybe without using checkboxes as they seem to overcomplicate the system.

The first issue is as James said in his comment, in that, the reason you're only getting the cross appear in the dropdown is due to selecting the cross with $(this) when you're actually looking for the parent, achievable through $(this).parent().

The second issue is that in your second JSFiddle, you have corrected the first issue, however, your code doesn't quite work, since you're now inserting a different type of element that doesn't contain a checkbox into your drop-down element, resulting in a whole heap of trouble when you attempt clicking on it. The way of rectifying this issue is by inserting a new HTML element as you did in a previous section of your code and removing the old element in the list. Resulting in the following modification to your .drop-item-close eventListener method;

$("#proposal-type-drop input[value='"+$(this).parent().text()+"']").remove();
$("#proposal-type-drop").append('<label class="drop-item">'+$(this).parent().text()+'<input type="checkbox" name="prop-type[]" class="drop-item-input" value="'+$(this).parent().text()+'"></label>').fadeIn();
$(this).parent().detach();

This brings us to our third issue as now we've generated a new element and it looks great in the drop-down list, however, it won't respond to your previous .drop-item-input eventListener. We require modifying this listener to also cope with dynamically added elements, in the following way;

$(document).on('change', '.drop-item-input', function() {
    /* Rest of your code */
});

Here is an updated JSFiddle containing these modifications and it should work as you intended.