动态查询生成器

I am creating a custom MySQL database query UI. Inside this UI I have a Query Builder interface that I would like to dynamically append query properties based on the user selections in order to create a dynamic query. Please see the below picture for a visual description

From the picture above I would like to append CHARACTER_SET after the FROM and append as asterisk when ALL is selected from the table and so forth with the key being the positions where I place the generated variables.

How can I achieve this with JQuery?

My JavaScript

Selecting a Table

$(document).on("change", ".tbl_list", function () {
    var tbls = new Array();
    $("input:checkbox[name='tbl[]']:checked").each(function () {
        tbls.push($(this).val());
    });
    var tbl = tbls.join('|');
    var db = window.sessionStorage.getItem("db");
    $.ajax({
        type: "POST",
        url: "ajax2.php",
        data: {
            tbl: tbl,
            db: db
        },
        success: function (html) {
            console.log(html);
            $("#tblField").html(html).show();
        }
    });
});

Selecting All option

  $(document).on("click", ".tblall", function () {
        if (this.checked) {
            // Iterate each checkbox
            $('.tblst').each(function () {
                this.checked = true;
            });
        } else {
            $('.tblst').each(function () {
                this.checked = false;
            });
        }
    });

EDIT

As requested HTML for my DIVs

Table Selector

while ( $row = mysqli_fetch_array ( $tbl_list ) ) {
        ?>
        <input type="checkbox" name="tbl[]" class="tbl_list"
    value="<?php echo   $row [0];   ?>" />
 <?php echo $row [0]; ?> 
<br>

Query Builder

<div id="qryDisplay">
            <fieldset>
                <legend> Query Builder</legend>
                <div id="qryView">
                    <p>SELECT   FROM</p>
                </div>
            </fieldset>
        </div>

What I have tried so far

Using .append I can add data to the end of the paragraph so this would be ideal for my Table name. However its a function and i'm not sure how I would implement the code below into my select table function.

$("#qryView > p").append("  " tblName);

Anyway, not considering the logic behind the selection of multiple tables my approach would be to store selections in hidden input fields and at the end construct from the hidden fields the query.

<input type="hidden" value="" name="hiddenTables" id="hiddenTables" />

fill field according to selections in your function from above:

$("input:checkbox[name='tbl[]']:checked").each(function () {
    tbls.push($(this).val());
    if($('#hiddenTables').val() == ""){ 
       $('#hiddenTables').val($(this).val()); 
    }else{
       $('#hiddenTables').val($('#hiddenTables').val()+','+$(this).val());
    }
});

At the end create your query:

// hidden field for field selection, same as above.
var fieldselection = '*';
if($('#hiddenFieldselection').val() != ""){
    fieldselection = $('#hiddenFieldselection').val();
}

$("#qryView > p").html("SELECT " + fieldselection + " FROM " + $('#hiddenTables').val()); 

This needs to be adjusted the way you need it of course and I haven't tested any of this... So that's up to you :-)