Как сделать динамический дизайн формы с помощью jquery

Question

Я спроектировал веб-страницу таким образом, чтобы для дизайна формы были левая боковая панель и правая пустая область. Как я могу достичь ниже функциональности: Когда пользователь нажимает кнопку текстового поля на левой боковой панели с правой стороны пустого пространства, должно отображаться одно текстовое поле со знаком закрытия если пользователь нажимает на какой-либо элемент формы в правой части поля, соответствующий элемент формы должен быть удален. должна быть одна кнопка очистки, если пользователь нажимает кнопку очистки

скриптовая ссылка: https://jsfiddle.net/t4uqc58w/1/

   #sidebar-wrapper {
      max-width: max-content;
    }

<script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/vendor/jquery/jquery.min.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="d-flex" id="wrapper">
    <!-- Page Content -->
    <div id="page-content-wrapper">
      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <!--<button class="btn btn-primary" id="menu-toggle">Preview</button>-->
        <h1>Free Form Design</h1>
      </nav>
      <div class="container-fluid">
      </div>
      <!-- Sidebar -->
      <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="list-group list-group-flush">
          <div class="list-group-item list-group-item-action bg-light">
            <input type="button" value="TextBox" />
          </div>
          <div class="list-group-item list-group-item-action bg-light">
            <input type="button" value="TextArea" />
          </div>
          <div class="list-group-item list-group-item-action bg-light">
            <input type="button" value="Checkbox" />
          </div>
          <div class="list-group-item list-group-item-action bg-light">
            <input type="button" value="Radio button" />
          </div>
          <div class="list-group-item list-group-item-action bg-light">
            <input type="button" value="DropDown" />
          </div>
        </div>
      </div>
      <!-- /#sidebar-wrapper -->
    </div>
    <!-- /#page-content-wrapper -->
  </div>