app\templates\new_content(3).html

#...

<script>

    document.addEventListener("DOMContentLoaded", function() {
        const client = stream.connect(
            '7yuqbuncncwa',
            '{{ token }}'
        );

        const content_template = document.querySelector('#content-template');
        const urlFieldElement = document.querySelector('#url');


        urlFieldElement.addEventListener('change', (event) => {

            var input_string1 = event.target.value.match(/(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&amp;]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi);
            var input_string2 = event.target.value.match(/https?:\/\/\S+/gi);

            if (input_string1 !== null || input_string2 !== null) {

                if (input_string2 !== null) {
                    var matches = input_string2
                } else {
                    var matches = input_string1
                }

                async function ogRequest(url) {

                    let response = await client.og(url);
                    return response
                }

                    ogRequest(matches[0])
                        .then((data) => {
                            let template_clone = content_template.content.cloneNode(true);
                            let content_scroller = document.querySelector('#content-scroller');

                            $("#url").val(matches[0]);
                            $("#image").val(data.images[0]['image']);
                            $("#title").val(data.title);
                            $("#description").val(data.description);

                            <!-- Content Info-->
                            template_clone.querySelector('#content-image').src = data.images[0]['image'];
                            template_clone.querySelector('#content-image-link').href = data.url;
                            template_clone.querySelector('#content-title').innerHTML = data.title;
                        
                            // Update ID value of element to let it be updated on field change
                            template_clone.querySelector('#content-title').id = `content-title-1`;
                            template_clone.querySelector('#content-description').innerHTML = data.description;
                       
                            // Update ID value of element to let it be updated on field change
                            template_clone.querySelector('#content-description').id = `content-description-1`;
                            template_clone.querySelector('#content-read-more').innerHTML = 'Read More';
                            template_clone.querySelector('#content-read-more').href = data.url;

                            content_scroller.appendChild(template_clone);

                        })
                    }
                });
             });
    
    // Listen for title and description field changes to edit preview
    var title = document.getElementById('title');

    title.onkeyup = title.onkeypress = function(){
        document.getElementById('content-title-1').innerHTML = this.value;
    };

    var description = document.getElementById('description');

    description.onkeyup = description.onkeypress = function(){
        document.getElementById('content-description-1').innerHTML = this.value;
    };


</script>
{% endblock %}