jQuery-文字のデータを交互に表示させたい

##前提・実現したいこと
①　最初に文字を登録するとき、最初は左の位置に保存
②　2回目に文字を登録するときは、右の位置にデータを保存
③　2つのデータを保存した後、3回目のデータを登録後、自動的に改行して①の動作に戻る
###登録してデータが保存するたびに、①～③の流れをループさせたい

##発生している問題・エラーメッセージ
1 改行されず、wrapperの枠内からはみ出してしまう
2 文字を右、左交互に表示させたいのにできない

##使用している言語
-HTML
-CSS
-jQuery

##HTMLとCSSのソースコード

html
1<!DOCTYPE html>
2<html lang="ja" manifest="cache.manifest">
3<head>
4<title>ToDoリスト</title>
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width">
7<link rel="apple-touch-icon" href="images/icon.png" />
8<link rel="stylesheet" type="text/css" href="css/main.css" media="all">
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10
11<script src="js/main.js"></script>
12
13</head>
14<body>
15<div id="wrapper">
16<h1>ToDoリスト</h1>
17
18<article>
19
20<section>
21<form class="todoForm">
22<div>
23<input type="text" class="todoText" placeholder="予定を入力して下さい">
24</div>
25<div id="buttons">
26<input type="submit" class="submit" value="登録" id="button">
27<input type="button" class="clear" value="全てクリア" id="button2">
28</div>
29</form>
30</section>
31
32<section id="list">
33<ul class="todoList">
34  <ul></ul>  
35</ul>
36</section>
37
38</article>
39    </div>
40</body>
41</html>
42

CSS
1* {
2	margin: 0;
3	padding: 0;
4	font-size: 20px;
5}
6body {
7	background-image: url(../images/b031.gif);
8	background-repeat: repeat;
9	color: black;
10}
11input[type="text"] {
12	width: 350px;
13}
14.complete {
15	color: #bbb;
16	text-decoration: line-through;
17}
18.remove,.remove2 {
19	font-size: 12px;
20	font-family: sans-serif;
21	display: inline-block;
22	padding: 1px 4px;
23	background: #a73836;
24	color: #fff;
25	border-radius: 3px;
26	margin-left: 10px;
27	font-weight: bold;
28	text-decoration: none;
29	cursor: pointer;
30  
31    
32}
33article {
34	margin: 15px;
35}
36h1 {
37	color: #fff;
38	text-align: center;
39	font-size: 1.2em;
40	padding: 10px;
41}
42
43#list li {
44	padding: 20px;
45	list-style: none;
46    justify-content: center;
47}
48form div {
49	margin: 10px 0px 20px 0px;
50}
51.todoInput {
52	border-style: none;
53	padding: 5px;
54	color: #999;
55	background: #fff;
56	border-radius: 5px;
57}
58
59#buttons{
60	width:220px;
61	display: flex;
62	justify-content: space-between;
63}
64
65.submit {
66	border-style: none;
67	padding: 4px 10px;
68	color: #fff;
69	cursor: pointer;
70	background: #b8d200;
71	border-radius: 5px;
72	font-weight: bold;
73}
74
75.clear {
76	border-style: none;
77	padding: 4px 10px;
78	color: #fff;
79	cursor: pointer;
80	background-color:#D7595B;
81	border-radius: 5px;
82	font-weight: bold;
83}
84
85
86#wrapper {
87    margin: 0 auto;
88    width: 960px;
89    height: 1080px;
90    background-image: url(../images/b066.gif);
91}
92
93
94
95
96
97
98ul.todoList {
99    width: 200px;
100     display:flex;
101    
102   
103}

#jQueryのソースコード

jQuery
1$(function(){    
2
3//1.登録ボタンをクリックしたときの処理。
4//1-1入力されたテキストを変数に格納する
5//1-2削除ボタン用のspanタグを変数に格納する
6//1-3HTML中に書き込まれるliの内容を変数に格納する
7//1-4入力したテキストを表示する（空のときはアラートを出す）
8//1-5ulの中に変数に格納したliタグを追加する
9//1-6追加後、二重投稿を防ぐためにテキスト欄を空欄にする
10	
11$('#button').click(function(){
12	var Text=$('.todoText').val();//1-1
13	var resetBtn='<span class="remove">×</span>';//1-2
14	var listSet="<li>"+Text+resetBtn+"</li>";//1-3
15	
16if(Text==""){
17	alert("予定を入力して下さい");
18	return false;
19	}else{
20	$('ul.todoList').append(listSet);
21	Text="";
22	$('.todoText').val(Text);
23		
24//a.ローカルストレージにデータを保存（複数のデータを保存したい場合はJSON形式のデータとして保存する）
25//a-1追加されたliを全て取得して変数に格納する
26//a-2そのデータをJSONデータに変換してから別の変数に格納する
27//a-3そのデータを保存する
28var ulContent=$('ul').html();//a-1 ulの子要素を取得
29var listObj=JSON.stringify(ulContent);//a-2
30localStorage.setItem('Key',listObj);//a-3
31		
32	return false;
33	}
34	
35})
36
37
38//2.全てクリアボタン　OKとキャンセルをアラートで表示する
39$('#button2').click(function(){
40	if(!confirm('本当に削除しますか？')){
41		return false;}else{
42			$("li").fadeOut();
43//c.ローカルストレージに保存された全データを消去する
44localStorage.removeItem("keyName");
45		}
46})
47	
48
49//3.削除ボタン ※注意 append()で追加された要素にclick()は効かないので、on()を使う
50//3-1クリックされたliのインデックス番号を調べ、そのliのみをremove()で消す
51$(document).on('click','li',function(){
52var indexNum=$('li').index(this);
53$("li:eq("+indexNum+")").remove();
54	
55//d.削除後残ったliをあらためて取得する	
56localStorage.clear();//全データを消去
57var ulContent=$('ul').html();//残ったulの子要素liを取得
58var listObj=JSON.stringify(ulContent);//JSONデータに変換してから変数に格納
59localStorage.setItem('Key',listObj);//そのデータを保存
60	
61})	
62	
63	
64//b.保存したデータを取得して、JSONデータからJavaScriptのオブジェクトに変換してから表示する
65var jsonObj=localStorage.getItem('Key');//取得
66var jsObj=JSON.parse(jsonObj);//JSオブジェクトに変換（liが入っている）
67$("ul").html(jsObj);//ulの中にliを追加する
68	
69	
70	
71});
72
73
74