jQueryはシャトルボックス効果を実現します

<div id="ボックス">
  <div id="boxleft">
   <ul id="left_ul">

   </ul>
  </div>
  <div id="boxbtn">
   <button id="btn_right">>>>></button>
   <ボタン id="btn_left">
    <<<< </ボタン>
  </div>
  <div id="boxright">
   <ul id="right_ul">

   </ul>
  </div>
</div>

<スタイル>
  * {
   マージン: 0 自動;
   パディング: 0;
   リストスタイル: なし;
  }

  ＃箱 {
   幅: 500ピクセル;
   ディスプレイ: フレックス;
   コンテンツの両端揃え: スペースを空ける;
   上マージン: 20px;
  }

  #ボックス右 {
   幅: 200ピクセル;
   高さ: 500px;
   境界線: 1px 実線ダークシアン;
  }

  #ボックス左 {
   幅: 200ピクセル;
   高さ: 500px;
   境界線: 1px 実線ダークシアン;
  }

  #ボックスボタン{
   マージン: 自動;
  }

  #boxbtn ボタン {
   幅: 50px;
   高さ：200ox;
   上マージン: 10px;
   ディスプレイ: フレックス;
   背景: deepskyblue;
   カーソル: ポインタ;
   色: 白;
  }

  ul li {
   高さ: 30px;
   行の高さ: 30px;
   下マージン: 2px;
   テキスト配置: 中央;
   背景: ダークグレー;
  }

  形状 {
   テキスト配置: 中央;
  }

  。アクティブ {
   色: 白;
   背景: ダークシーグリーン;
  }
</スタイル>

<スクリプト>
  arr = [とする
   { "id": 1, "name": "zhang", "check": false },
   { "id": 2, "name": "liu", "check": false },
   { "id": 3, "name": "guan", "check": false },
   { "id": 4, "name": "zhao", "check": true },
   { "id": 5、 "name": "ao"、 "check": true }
  ];

  $("#add").click(関数() {
   var name = $("#name").val();
   arr.push({ "名前": 名前 });
   表示UL(arr);
  })
  $(関数() {
   表示UL(arr);
  })
  関数 showUL(arr) {
   var leftstr = "";
   var rightstr = "";
   for(let i in arr) {
    {id、名前、チェック} = arr[i]とします。
    if (チェック) {
     右文字列 += `
      <li _id="${id}">${名前}</li>
    `
    } それ以外 {
     左str += `
      <li _id="${id}">${名前}</li>
    `
    }

   }
   $("#left_ul").html(leftstr);
   $("#right_ul").html(rightstr);
  }


  $("#left_ul").on("クリック", "li", 関数 () {
   インデックスをarr.findIndex((v) => {とする
    v.id == $(this).attr("_id"); を返します。
   })

   $(this).hasClass('active') の場合 {
    $(this).removeClass('active');
    arr[インデックス].check = false;
   } それ以外 {
    $(this).addClass('アクティブ');
    arr[インデックス].check = true;
   }
  });
  $("#right_ul").on("クリック", "li", 関数 () {
   インデックスをarr.findIndex((v) => {とする
    v.id == $(this).attr("_id"); を返します。
   })

   $(this).hasClass('active') の場合 {
    $(this).removeClass('active');
    arr[インデックス].check = true;
   } それ以外 {
    $(this).addClass('アクティブ');
    arr[インデックス].check = false;
   }
  });
  $("#btn_right").click(関数() {
   ($("#left_ul .active").length == 0) の場合は false を返します。

   表示UL(arr);
  })
  $("#btn_left").click(関数() {
   ($("#right_ul .active").length == 0) の場合は false を返します。
  
   表示UL(arr);
  })  
</スクリプト>