I dragged a jQuery source code block and pasted my API documentation jQuery code.

<div class="appdrag-gallery" format="rectangle" columns="4" spacing="10" caption-position="full-image" caption-alignment="center" caption-background="rgba(48,76,224,0.56)" border-size="0" border-radius="0" opacity="0.92" text-color="rgba(237,237,237,1)"
    font-family="Montserrat" font-size="30" market-id="3698545" owner-id="1" style="display:block">
    <div class="appdrag-gallery-data" id="galleryData">
    </div>
    <div class="appdrag-gallery-view" id="galleryContainer"></div>
    <div class="clearfix">
    </div>
    </div>
    <script  appdrag-embed="true">
        //Wait for jquery to load before executing code
        addEventListener('JqueryLoaded', function(e) {

            // Pull the ID parameter from URL to place in API
            var url_string = window.location.href; // REFER TO IMAGE NOT PAGE?
            var url = new URL(url_string);
            var id = url.searchParams.get("id");

            // API call to fetch images from database
            var settings = {
                "url": "REPLACE_WITH_YOUR_API_URL", 
                "data": {
                    "id": id, 
                    "AD_PageNbr": "1",
                    "AD_PageSize": "500"
                },
                "method": "GET",
                "async": true,
                "crossDomain": true,
                "processData": true
            };
            $.ajax(settings).done(function(response) {

                // Check recieved Object
                var object = JSON.parse(response);
                if (object != null && object.Table != null && object.Table.length > 0 && object.Table[0].gallery != "") {
                    var images = JSON.parse(object.Table[0].gallery);
                    var pictureData = "";
                    var pictureView = "";

                    // Iterate through each image and create its own HTML block
                    $.each(images, function(idx, url) {
                        pictureData += '<div class="appdrag-gallery-data-elem" caption="" gallery-image="' + url + '" order-id="0"></div>';
                        pictureView += '<div class="col-sm-3 col-xs-12" style="padding:10px">\
                                <div class="appdrag-gallery-link" lightbox="' + url + '">\
                                    <div class="appdrag-gallery-elem" caption="" gallery-image="' + url + '" order-id="0" style="border-style:none;border-width:0;border-radius:0;opacity:.92;border-color:#ccc">\
                                        <div class="appdrag-gallery-image appdrag-gallery-image-rectangle" style="background-image:url(\'' + url + '\')">\
                                            <div class="appdrag-gallery-caption au-center appdrag-gallery-caption-full-image" style="font-family:Montserrat;font-size:30px;background-color:rgba(48,76,224,.56);color:#ededed">\
                                                <span style="display:inline-block;vertical-align:middle"></span>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>';
                    })

                    // Call the containers by their IDs and append the image blocks
                    $("#galleryData").append(pictureData);
                    $("#galleryContainer").append(pictureView);
                    resetLightbox(); //re-init lightbox for all generated images
                }
            });
        }, false);
    </script>

I followed this tutorial what I have mentioned above

Here is where I got stuck.

I know that I have to iterate through each image so it can populate the gallery once I make a selection from the searchable list(dropdown). How would I bind the searchable list, gallery and database properly? In the searchable list edit element would I click on 'Data source Cloud Backend' or would I click on 'Triggers ->Cloud Backend' What is the different between these two options?

Also would the process look the same binding checkboxes and text inputs with the database

Any screenshots, code snippets, or guidance would be appreciated.