Js Xml  Path:static-src-xml:

        <div t-name="widget_1">
           <button type="button" id = "button_1" >Click</button>
          <div id = "test"> </div>
       </div>
       <div t-name="widget_2">
            <p>Second Widget</p>
       </div>
Js:

odoo.define("module_name.name", function(require) {
    "use strict";
     var Widget = require("web.Widget");
            var Widget_Extend = Widget.extend({
            template: "widget_1",

            start: function() {
                 var self = this;
                 $(document).ready(function(){
                       setTimeout(function(){
                            $(document).on("click", "#button_1", function() {
                            var widget_call = '';
                            widget_call = '<div id ="test"></div>'
                            widget_call + = '<t t-call="widget_2"/>'
                            $('#test').html(widget_call);
                        });
                   });
             });
        }
    });
 core.action_registry.add("module_name.name", Widget_Extend);

});

Note:
I have tried to call "widget_2" using js but i could not get what i expect. I am not sure this the way to call the widget but i have tried a lot. If any one have some other way to call the 2nd widget from 1st widget using js kindly let me know.

Anticipating all kind of information about this problem.

Thanks.