How can I solve php checkbox loop for each field problem?

I want form to be loop by how many checkboxes are checked. Like if for each color what sizes are available. But having some issues. For each checkbox I check It's implementing on all color arrays like in the picture what am looking for

form page

    <form method="post" action="submit.php">
    ID:<input type="text" name="id" />       
    Name:<input type="text" name="product" />       
    <div class="form-group fieldGroup">
        <div class="input-group">
            Color : <input type="text" name="color[]" id="color">
            X <input type="checkbox" name="size[]" id="size" value="X" >
            XL <input type="checkbox" name="size[]" id="size" value="XL">
            S <input type="checkbox" name="size[]" id="size" value="S">
            M <input type="checkbox" name="size[]" id="size" value="M">
            <a href="javascript:void(0)" class="addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
        </div>
    </div>

    <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>

</form>

submit.php code

    if(isset($_POST['submit'])){
    $colorArray = $_POST['color'];
    $sizeArray = $_POST['size'];
    $product = $_POST['product'];
    $sl = 1;
    $id  = $_POST["id"];
    $product  = $_POST["product"];
    if(!empty($colorArray)){
        for($i = 0; $i < count($colorArray); $i++){
            if(!empty($colorArray[$i])){

                foreach ($sizeArray as $x ){
                        $color = $colorArray[$i];
                        echo "<h2>" .$sl."> Name : ". $product ." > ".$id ." > ". $color .">" .$x ."</h2>";
                        $sl++;
                }
            }
        }
    }
}