Table not showing in database

I am learning programming and I would like to create a database using javascript to save some recipes. I have written this code. Database is created but the table is not created in the database.

var db;
                $(document).ready(function(){
                        $("#submitButton").click(function(){
                                db = openDatabase("Cooksta","1.0","database of cooksta", 2*1024*1024*1024);
                                CreateTable();
                        });
                });
                
                function CreateTable(){
                        db.transaction(function(t){
                                t.executeSql ('CREATE TABLE IF NOT EXISTS RecipeText(ID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT, ingredients TEXT, description TEXT)' ,[]);
                                var recipeName=document.getElementById('recipeNameBox').value;
                                var recipeIngredient=document.getElementById('recipeIngredientBox').value;
                                var recipeDescription=document.getElementById('recipeDescriptionBox').value;
                                t.executeSql ('INSERT INTO RecipeText(name,ingredients,description) VALUES(?,?,?)',[recipeName.value,recipeIngredient.value,recipeDescription]);
                        });
                }

<script src="http://ift.tt/1oMJErh"></script>
<input id="recipeNameBox" type="text" name="NameOfRecipe" placeholder="Name of recipe"/> <br> <br>
        
        <input id="recipeIngredientBox" type="text" name="IngredientOfRecipe" placeholder="Ingredients"/> <br> <br>
        <p>Enter the Recipe</p>
        <input style="width: 300px; height: 500px" id="recipeDescriptionBox" type="text" name="DescriptionOfRecipe"/> <br> <br>
        
        <input id="submitButton" type="button" name="submit" value="Submit"/>