各ボタンから追加した各テキストエリアをlocalStorageで保存・削除を実行したい

各ボタンから追加した各テキストエリアをlocalStorageで保存・削除を実行したい

ワードプレスでページ製作をしています。javaに関しては素人で検索した素材をよく利用しています。

今回、複数のテキストエリア生成ボタンを用意し、追加した要素&テキストエリアの内容を保存するために検索しヒットした情報を実行、微調整、繋ぎ合わせと素人ならではで試行錯誤しております。

localStorageを利用して次のことを実現したいです。
（１）appendで追加した<li><texterea><button>～をブラウザの更新時に消えないように保存する
（２）appendで追加した各テキストエリアの内容を（各々or一括）保存する
（３）appendで追加した<li>を削除する
（４）各テキストエリアで保存した内容を全てクリアにする
現状、追加は出来ても要素&テキストエリアの保存・削除ができません。

ただいま検証しているコードが下記になります。

各ボタンでテキストエリアを追加するコード

<button id="ma">button1</button>
<button id="sa">button2</button>
<button id="ka">button3</button>
    <ul id="list">
    </ul>
</li>
</ul>

<script>

      $(function() {
        $("#ma").click(function() {
        $("#list").append('<textarea id="text1" class="text1"></textarea><button id="save1">保存</button><button id="delete1"  onClick="history.go(0)">削除</button>');
        });

        $("#sa").click(function() {
        $("#list").append('<textarea id="text2" class="text2"></textarea><button id="save2">保存</button><button id="delete2" onClick="history.go(0)">削除</button>');
        });

        $("#ka").click(function() {
        $("#list").append('<textarea id="text3" class="text3"></textarea><button id="save3">保存</button><button id="delete3" onClick="history.go(0)">削除</button>');
//とりあえず３個ですが実際はは１０個以上作る予定です。
        });
     });

<script>

上記のコードをもとに、localStorageの指示をあてはめようと苦戦しています。

追加された要素&テキストエリアをlocalStorageで保存・削除

以下、複数のテキストのエリアの保存ができたスクリプトです。
これをうまく上記のスクリプトに組み合わせられれば良いのですが、そもそも見当違いかもしれません。

$(function(){
    $("#list .text1").val(window.localStorage.getItem("text1"));
    $("#list .text2").val(window.localStorage.getItem("text2"));
    $("#list .text3").val(window.localStorage.getItem("text3"));

});

$("#save1").click(function(){
    window.localStorage.setItem('text1',  $("#list .text1").val());
    alert("データ1を保存しました。");
});

$("#save2").click(function(){
    window.localStorage.setItem('text2',  $("#list .text2").val());
    alert("データ2を保存しました。");
});

$("#save3").click(function(){
    window.localStorage.setItem('text3',  $("#list .text3").val());
    alert("データ3を保存しました。");
});


$("#delete").click(function(){
    window.localStorage.clear();
    $("#textarea1").val('');
    $("#textarea2").val('');
    $("#textarea3").val('');
    alert("データを全て削除しました。");
});


$("#delete1").click(function(){
window.localStorage.removeItem('text1', $("list").val());
    alert("データ1を削除しました。");
});

$("#delete2").click(function(){
window.localStorage.removeItem('text2', $("#list").val());
    alert("データ1を削除しました。");
});

$("#delete3").click(function(){
window.localStorage.removeItem('text3', $("#list").val());
    alert("データ3を削除しました。");
});

localStorageは文字列の保存ができないため、HTMLなどはオブジェクトに変換し保存ということでいろいろコードを当てはめたのですが保存できず。なのでHTMLは置いといて各ボタンからテキストエリアのみを追加、さらにテキストエリアの内容の保存を試みたりしたのですがうまくいきません。

どうかご教授くださいますようよろしくお願いいたします。