How can I draw network graph using checkboxes?

I have a table with MySQL datas. Each row has a button. If I click one of the button, a Bootstrap modal appears. This modal shows where this datas connected to. These have checkboxes: modal

If I select 1 or more then I click on the button, I want to show only the Data1 node and the selected nodes. For example I select data2 and data3 then it show the data1 node connect to the data2 and data3 nodes. How can I do this?

My network graph is working, because if I add it to the button that show the current data's relations, it draws the graph correctly.

Checkboxes

while($row=$result->fetch_assoc()){ 

                $output .='

                <tr>  
                    <td align="center"><input name="case" class="checkboxes" type="checkbox" value="'.$row["data2"].'"</td>
                    <td>'.$row["data2"].'</td>  
                    <td style="display: none;">'.$row["conn"].'</td> 
                </tr>  
            ';

            }

Javascript (network graph)

$(document).ready(function(){
                $('#checkBtn2').click(function(e){  
                    e.preventDefault();
                    var data_id = $(this).attr("id");  
                    $.ajax({  
                        url:"nodes.php",
                        method:"post",
                        dataType: "json",
                        data:{data_id:data_id},  
                        success:function(data){  
                            $('#moreInfo').html(data);  
                            $('#dataModal').modal("show");  
                            var nodeDatas = new vis.DataSet();
                            nodeDatas = data;

                            $.ajax({
                                method:"post",
                                dataType: "json",
                                url: "edges.php",
                                data:{data_id:data_id},
                                success: function(data){
                                    var edgeDatas = new vis.DataSet();
                                    edgeDatas = data;
                                    var myDiv = document.getElementById("moreInfo");

                                    data={
                                        nodes: nodeDatas,
                                        edges: edgeDatas
                                    };

                                    var options = {
                                        autoResize: true,
                                        height: '100%',
                                        width: '100%',
                                        edges: {
                                            color: 'rgba(141, 198, 063, 1)',
                                            smooth: false,
                                            arrows: {to: true}
                                        },
                                        layout: {
                                            randomSeed: undefined,
                                            hierarchical: {
                                                improvedLayout: true,
                                                enabled: true,
                                                levelSeparation: 150,
                                                nodeSpacing: 100,
                                                treeSpacing: 200,
                                                blockShifting: true,
                                                edgeMinimization: true,
                                                parentCentralization: true,
                                                direction: 'UD',        // UD, DU, LR, RL
                                                sortMethod: 'directed'   // hubsize, directed
                                            }
                                        },
                                        nodes: {
                                            color: {highlight:{background: '#ddd', border:'rgba(141, 198, 063, 1)'}, background: 'rgba(141, 198, 063, 1)', border: 'rgba(141, 198, 063, 1)', hover:{ background:'#ddd',border:'rgba(141, 198, 063, 1)'}},
                                            shape: 'box'
                                        },
                                        physics: false,
                                        interaction: {
                                            hover: true,
                                            dragNodes: false, // do not allow dragging nodes
                                            zoomView: false, // do not allow zooming
                                            dragView: true // allow dragging
                                        }
                                    };

                                    var network = new vis.Network(myDiv, data, options);

                                    $.getJSON('edges.php', function(edges){
                                        edgeDatas.add(edges);
                                    });
                                }
                            });
                        }  
                    }); 
                });
            });