Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DEMO2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

	function GetAllFormandos(){
		$.ajax({
				method: "GET",
				url: "http://rest.learncode.academy/api/learncode/friends",
				success: function(data, textStatus){
					console.log(data);
					console.log(textStatus);

					$('#listaFormandos > li:eq(0)').siblings().remove();

					$.each(data, function(index, item){
					if(item['name']){

					var $newItem = $('#listaFormandos > li:eq(0)').clone();

					$newItem.removeClass('hidden');
					$newItem.text(item['name']);

					 $('#listaFormandos').append($newItem);
					}
				});
				}

				});
	}

    $(document).ready(function () {

			GetAllFormandos();

			$('#btnAdd').on('click',function(){
				$.ajax({
					method: "POST",
					dataType: "JSON",
				  	url: "http://rest.learncode.academy/api/learncode/friends",
				  	data: { name: $('#addFormando').val()},
				  	success: function(){
					  GetAllFormandos();
					  $('#addFormando').val('');
				  }
				});
			});
	});
</script>

<style type="text/css">
   .hidden{display: none;}
</style>
</head>

<body>
<h1>Lista de Formandos:</h1>
<ul id="listaFormandos">
	<li class="hidden"></li>
</ul>

<input type="text" id="addFormando" />
<br/>
<button id="btnAdd">Adicionar</button>
</body>
</html>