Use jQuery to show second field based on the first select list option

Question

When I select multiple fields from the first selection box (Animal & Bird) the second selection box shows the first field I selected.

It works fine if I select from the first selection box and i get the correct output on the second selection box.

But, when I select multiple field on the first selection box, the output on the Second Selection box doesn't show all the output based on the first selection box.

Below is my code please help me:

$("#select1").change(function() {
  if ($(this).data('options') == undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="select1" id="select1" size="4" multiple>
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>

<select name="select2" id="select2" size="4" multiple>
  <option value="1">Banana</option>
  <option value="1">Apple</option>
  <option value="1">Orange</option>
  <option value="2">Wolf</option>
  <option value="2">Fox</option>
  <option value="2">Bear</option>
  <option value="3">Eagle</option>
  <option value="3">Hawk</option>
  <option value="4">BWM<option>
</select>

Answer 1

I have tried to modify the code so that it will also work with a third selectfield but I cannot get it to work.

The field structure would be like this:

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 </script>
<select name="select1" id="select1" size="4" multiple>
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>
<select name="select2" id="select2" size="4" multiple>
  <option value="1">Banana</option>
  <option value="1">Apple</option>
  <option value="1">Orange</option>
  <option value="2">Wolf</option>
  <option value="2">Fox</option>
  <option value="2">Bear</option>
  <option value="3">Eagle</option>
  <option value="3">Hawk</option>
  <option value="4">BWM</option>
</select>
<select name="select3" id="select3" size="4" multiple>
  <option value="1">Kiwi</option>
  <option value="1">Mango</option>
  <option value="2">Cat</option>
  <option value="2">Dog</option>
  <option value="2">Rat</option>
  <option value="3">Pelican</option>
  <option value="3">Sparrow</option>
  <option value="4">Audi</option>
</select>

So, on changing the select1 the script should refresh select2 and select3.

$("#select1").change(function() {
  if ($(this).data('options') == undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('#select2 option').clone());
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter(

    function() {
      return $.inArray(this.value, id) > -1;
    });
  $('#select2').html(options);
  $('#select3').html(options);
});