SOURCE

const remoteDataStr = document.querySelector('.remoteDataStr');
const sortDataStr = document.querySelector('.sortDataStr');
const btn = document.querySelector('.btn');
const Pinput = document.querySelector('.Pinput');
const remoteData = [];
const sortData = [];

btn.addEventListener('click', function () {
    var data = Pinput.value.split(',');
    if (data.length !== 0) {
        for (let i = 0; i < data.length; i++) {
            remoteData.push(parseInt(data[i]));
            sortData.push(parseInt(data[i]));
        }
    }
    sortData.sort(function (a, b) {
        return a - b;
    });
    remoteDataStr.innerHTML = `${remoteData.join(',')}`;
    sortDataStr.innerHTML = `${sortData.join(',')}`;
});

<div id="Arraysort">
        <div class="tile">
          <div class="data-name">原始数据</div>
          <div class="data remoteDataStr"></div>
        </div>
        <div class="tile">
          <div class="data-name">排序数据</div>
          <div class="data sortDataStr "></div>
        </div>
        <div class="control">
          <input class="Pinput" type="text"  placeholder="请输入...." />
          <div class="btn">添加</div>
        </div>
      </div>

#Arraysort{
    width: 500px;
  }
  .tile {
    display: flex;
    color: #ffffff;
    text-align: center;
    .data-name {
      padding: 5px 0;
      background: #994d52;
      flex: 1;
    }
    .data {
      padding: 5px 0;
      background: #e6b450;
      flex: 3;
    }
  }
  .control {
    display: flex;
    background: #fe4365;
    padding: 5px 20px;
    input {
      color: #ffffff;
      outline: 0;
      border: none;
      background: transparent;
    }
    .btn{
        float: right;
        text-align: center;
    }
  }