How to send dynamic data inside the bootstrap modal into database

I have a checkbox list. When I click on a checkbox, a modal appears with corresponding data coming from database. I have already done this. here are my codes.

db.php

<?php  
    $servername = "localhost";
    $username = "root";
    $password = "";
    $db = "db";

    $conn = mysqli_connect($servername, $username, $password,$db);
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }
    echo "Connected successfully <br/>";
?>

student.php

<body>
    <form>
        <label>
            <input type="checkbox" value="1" name="name">
            Ann
        </label>
        <label>
            <input type="checkbox" value="2" name="name">
            Sam
        </label>
        <label>
            <input type="checkbox" value="3" name="name">
            Amaa
        </label>
    </form>

    <!--modal-->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" id="submit" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>

student.js

$(document).ready(function(){
    $("input[type=checkbox][name=name]").change(function(){
        if(this.checked) {    
            var value = $(this).val();
            $.ajax({
                url:"modal.php",
                type:"POST",
                data:{value:value},
                success:function(modalBody){
                    $("#myModal .modal-body").html(modalBody);
                    $("#myModal").modal('show');
                }
            });
        }
    });
});

modal.php

<?php
    if($_POST['value']){
        $test = $_POST['value'];
        include('db.php');

        $sql = "SELECT subject FROM grade where name=".$value." ";
        $res = mysqli_query($conn,$sql);
        while($row = mysqli_fetch_assoc($res)){
            echo "<input type='checkbox' name='subject[]' value='".$row['subject']."'>".$row['subject'];
            echo "<br>";   
        }
    }
?>

My problem is how to send selected checkbox values on the modal into the database? Here are the way I tried.

new.js

$(document).ready(function(){
    $("input[type=checkbox][name=name]").change(function(){
        if(this.checked) {
            var value = $(this).val();
            $.ajax({
                url:"modal.php",
                type:"POST",
                data:{test:value},
                success:function(modalBody){
                    $("#myModal .modal-body").html(modalBody);
                    $("#myModal").modal('show');
                }
            });
        }
    });

    $('#myModal submit').on('submit',function(){
        var insert = [];
        $('input[name=category[]]').each(function(){
            if($(this).is(":checked")) {
                insert.push($(this).val());
            }
        });
        insert = insert.toString();
        $.ajax({
            url: "insert.php",
            method: "POST",
            data:{insert:insert},
            success:function(data){
                $('#result').html(data);
            }
        });
    });
});

insert.php

<?php
    if(isset($_POST["insert"])) {
        include ('db.php');
        $query = "INSERT INTO name_list(student_name) VALUES ('".$_POST["insert"]."')";
        $result= mysqli_query($conn, $query);
        echo "Data Inserted Successfully!";
    }
?>

I tried a lot. Everytime name_list table fills with no values. can you help me to solve this?Again I want send selected checkbox values on the modal into database. Below values.

echo "<input type='checkbox' name='subject[]' value='".$row['subject']."'>"

Solution

First of all if there are more than one checkbox with the same name than the name must be an array like:

<form>
   <input type="checkbox" name="bla[]" value="1" />
   <input type="checkbox" name="bla[]" value="2" />
</form>

Now you can get there value in jquery like:

$(document).ready( function () {    
    $("input[name='bla[]']").each( function () {
    if($(this).is(':checked'))
    {
        alert($(this).val());
        // put this value in an array
    }
    });
});

Working Fiddle