fadeInとFadeOutを利用し回答ボタン押下で次の質問を表示させたい

前提

JavaScriptを学んでいる初心者です
アドバイスをいただければ幸いです

実現したいこと

診断系ツールを作成しており
ボタンを押下すると質問を切り替えるような表現をしたいです
fadeInで問題を表示し、FadeOutで問題を非表示にするイメージです

発生している問題

3番目以降の問題をどうやって表示すれば良いか悩んでおります
いくつか試してみましたが、質問が同時に表示されたり、
反応せずに表示されなかったりと求めている挙動になりません

該当のソースコード

html

<div class="aa"><ul> <li id="Question01">Question01</li> <li id="Question02" style="display:none;">Question02</li> <li id="Question03" style="display:none;">Question03</li> <li id="Question04" style="display:none;">Question04</li> <li id="Question05" style="display:none;">Question05</li> <li id="Question06" style="display:none;">Question06</li></ul><div> <button class="answer-yes" id="yes">はい</button> <button class="answer-no" id="no">いいえ</button> <button class="answer-close-yes" id="close-yes">はいに近い</button> <button class="answer-close-no" id="close-no">いいえに近い</button>

js

$('button').on('click',function(){ $('#Question01').fadeOut( 2000, liChange); function liChange(){ $('#Question02').fadeIn(); }});