How to show lists of added card in bootstrap?

Question

Hi Team

 

I want to create lists of created courses, based on the given logic i have created. Meaning i want when creating course button, it must add list to 'Unpublished Courses(0)=>1 etc. Here is my client side logic on bootstrap

<center>
    <div class="z-inex" style="width:1500px;">
        <div class="register-logo">

        </div>
        <div class="card">
            <div class="card-body register-card-body">
                <center>
                    <img src="~/Images/eNtsa.png" />
                </center>
                <!--Main Navigation-->

                <h1 style="text-align:center">Dashboard</h1>
                <hr />
                <main>
                    <div class="container" style="height:1000px;">
                        <div class="row mt-5 pt-5">
                            <div class="col text-center">
                                <h2>Published Course(0)</h2>
                                <hr />
                                <br>
                                <p>No courses to display</p>
                                <hr />
                                <h3>Unpublished Courses(0)</h3>  // This must add here lists and be shown to a user.

                                <center>
                                    <div class="card" style="width: 18rem;">
                                        <div class="jump-response"></div>
                                        <div class="card-body d-flex flex-1">
                                            <a href="#" class="btn btn-primary pull-left">Published</a>
                                        </div>

                                        <div id="divLogo" class="card-body d-flex flex-center">
                                            <a href="@Url.Action("Modules","Home")" class="card-link pull-left">Me</a>
                                            <hr/>
                                            <a href="@Url.Action("Files", "Home")" id="divSiteTitle"></a>
                                            <img class="card-img-bottom" src="~/Images/folders/folder-icon.png"  style="max-width:32px;">

                                        </div>
                                    </div>

                                </center>
                            </div>
                            @using (Html.BeginForm("CoursesRegistration", "Home", FormMethod.Post))
                            {
                                <div class="form-group row">
                                    <div class="col-xs-3 ml-auto">
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                            Start New Course
                                        </button>
                                    </div>
                                </div>
                            }
                            <hr />
                            <!--Button View Grades-->
                            @using (Html.BeginForm("ViewCourses", "Home", FormMethod.Post))
                            {
                                <div class="form-group row">
                                    <div class="col-xs-3 ml-auto">
                                        <a class="btn btn-large btn-success" id="viewCourse" href="@Url.Action("ViewCourses", "Home")">View Grades</a>
                                        <script type="text/javascript">
                                            $('#ViewCourses').on('click', function (e) {



                                            });
                                        </script>

                                    </div>
                                </div>
                            }

                            <!-- Modal -->

                            @using (Html.BeginForm("CoursesRegistration", "Home", FormMethod.Post))
                            {
                                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Start New Course</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">×</span>
                                                </button>
                                            </div>
                                            <div class="form-group row">
                                                <label for="CourseName" class="col-sm-3 col-form-label">CourseName</label>
                                                <div class="col-sm-5">

                                                    @Html.EditorFor(model => model.Dashboard.CourseName, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "CourseName" } })
                                                </div>
                                            </div>
                                            @using (Html.BeginForm("CourseList", "Home", FormMethod.Post))
                                            {
                                                <div class="form-group row">
                                                    <label for="Content-Licence" class="col-sm-3 col-form-label">Content Licence</label>
                                                    <div class="col-sm-5">
                                                        @Html.DropDownListFor(model => model.eCourses.CourseList, CourseListData as List<SelectListItem>)
                                                    </div>
                                                </div>

                                            }

                                            @using (Html.BeginForm("CoursesRegistration", "Home", FormMethod.Post))
                                            {
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                    <a href="@Url.Action("CoursesRegistration", "Home")" class="btn btn-large btn-success">Create Courses</a>
                                                    <script type="text/javascript">
                                                        $(".btn-success").click(function () {
                                                            saveData();
                                                        });

                                                        function saveData() {
                                                            var clientNo = $("#ClientId").val();
                                                            var courseName = $("#CourseName").val();
                                                            debugger
                                                            $.ajax({
                                                                url: "/Home/CoursesRegistration",
                                                                type: 'POST',
                                                                data: JSON.stringify({ 'clientNo': clientNo, 'courseName': courseName }),
                                                                dataType: "json",
                                                                traditional: true,
                                                                contentType: "application/json; charset=utf-8",
                                                                success: function (result) {

                                                                }
                                                            });
                                                            //return false;
                                                        }


                                                    </script>

                                                </div>
                                            }
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>

                </main>
            </div>
        </div>
    </div>
</center>