JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>    
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="/scripts/promise.js"></script>
    <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

</head>
<body><br><br>
    <div class="container text-center row">
        
        <div class="card col-2 bg-primary text-light" id="itemList">
        
        </div>
        
        <div class="card col-2 bg-secondary"><input type="text" class="form" id="txtValue">
        <button type="button" class="btn btn-success" id="updateList">Submit</button></div>
    
    </div>
</body>
</html>

JavaScript

const fullList = [                             //In real environment, this is populate via REST operation.
    { id: "12", title: "A", code: "110" },
    { id: "23", title: "B", code: "120" },
    { id: "13", title: "C", code: "130" },
    { id: "43", title: "D", code: "140" },
    { id: "52", title: "E", code: "150" },
]

$(document).ready(function () {
    initialLoad(fullList);

    $('#updateList').click(function() {
        let item = $('#txtValue').val();
        addToList(item)
    });
})

function initialLoad(list) {
    //In real environment, this is a getItem operation using sprLib.
    $('#itemList').empty();
    let listHTML = ''
    for (i = 0; i < list.length; i++) {
        listHTML += '<p>'+list[i].title+' ' +list[i].code+'</p>'
    }
    $('#itemList').append(listHTML);
}

function addToList(entry) {
    new Promise(function(result, reject) {
    fullList.push({ 'id': "", 'title': entry, 'code': ""}); //In real environment, this is an CRUD operation using sprLib.
    }).then(function(result){
        initialLoad(fullList)
    });
}