8.3: Correction

Il faut adapter le id des deux nouveaux popup.
Le JS utilise le nom qui se trouve dans data-popup en ajoutant "popup-" devant.

popup.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>popup</title>
		<link type="text/css" rel="stylesheet" href="popup.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="popup.js"></script>
	</head>
<body>
<div id="connectes">
	<p>Connectés : </p>
	<ul>
		<li><span class="popup-mot" data-popup="joe" >Joe </span></li>
		<li><span class="popup-mot" data-popup="marc">Marc</span></li>
		<li><span class="popup-mot" data-popup="lian">Lian</span></li>
	</ul>
</div>
<div id="popup-joe" class="popup">
	<span class="fermer">X</span>
	<img class="triangle" src="triangle.png" alt=""/>
	<img src="et.png" alt="joe" class="photo"/>
	<h2>Joe</h2>
	<p>Célibataire, 22 ans.<br/>Aime les épinards.</p>
	<p>
		<a href="...">films</a> | <a href="...">page perso</a>
	</p>
</div>
<div id="popup-marc" class="popup">
	<span class="fermer">X</span>
	<img class="triangle" src="triangle.png" alt=""/>
	<img src="marc.png" alt="joe" class="photo"/>
	<h2>Marc</h2>
	<p>Marié, 29 ans.<br/>Aime les oranges.</p>
	<p>
		<a href="...">films</a> | <a href="...">page perso</a>
	</p>
</div>
<div id="popup-lian" class="popup">
	<span class="fermer">X</span>
	<img class="triangle" src="triangle.png" alt=""/>
	<img src="lian.png" alt="joe" class="photo"/>
	<h2>Lian</h2>
	<p>Joueur d'échecs, 24 ans.<br/>Aime les glaces.</p>
	<p>
		<a href="...">films</a> | <a href="...">page perso</a>
	</p>
</div>
</body>

</html>