index.html

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <title>Belajar Grab Data</title>
</head>

<body>
    <div class="container">
        <h1 class="text-center">Grab Icon</h1>
        <hr>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#testing">
            Tambah icon
        </button>

        <div class="modal fade" id="testing" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="tes" class="form-horizontal">
                        <div class="modal-body">
                            <section class="content">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="row fontawesome-icon-list" id="pilih">

                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="tambah">Save changes</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <table class="table table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Icon</th>
                </tr>
            </thead>
            <tbody id="icon">

            </tbody>
        </table>
    </div>

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
        var getData = function (data) {
            $scope = {};
            $scope.data = data;
            this.getResult = function () {
                return $scope.getResult();
            }
            $scope.getResult = function () {
                var _jquery = $($scope.data);
                return _jquery.find('.fontawesome-icon-list div i');
            }
        }

        $(document).ready(function () {
            $.ajax({
                url: 'icons.html',
                success: function (data) {

                    var tp = new getData(data);
                    var hasil = tp.getResult();
                    var icon = '';
                    for (i = 0; i < hasil.length; i++) {
                        icon +=
                            '<div class="col-md-3 col-sm-4"><input type="radio" name="con" value="' +
                            hasil[i].className + '"> <i class="' +
                            hasil[i].className +
                            '"></i></div>';
                    }
                    $('#pilih').html(icon);
                }
            })
            $('#tes').submit(function (e) {
                e.preventDefault();
                icon = $('[name="con"]:checked').val();
                $('#icon').append('<tr><td><i class="' + icon + '"></i></td></tr>');
                $('#testing').modal('hide');
            })
        });
    </script>
</body>

</html>