jquery - remove siblings not working

Question

I am trying to toggle between font-awesome elements .

I want to remove the font-awesome element when a new a tag is clicked. The font-awesome element should be visible only for the current clicked a tag.

[FIDDLE][1]

My JS CODE.

$(document).ready(function() {
  $('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
  $('.nav ul li a').click(function(event) {
    event.preventDefault();
    $(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working
      });

    });

Answer 1

$(document).ready(function() {
  var fontAwesome = $('<i/>').addClass('fa fa-chevron-right');
  $('.nav ul li:first').append(fontAwesome);
  $('.nav ul li a').on('click', function(event) {
    event.preventDefault();
    $('.nav ul li a i.fa.fa-chevron-right').remove();
    $(this).append(fontAwesome);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="#section-features">Option A</a></li>
    <li><a href="#section-functions">Option B</a></li>
    <li><a href="#section-pecifications">Option C</a></li>
  </ul>
</div>