How to add a div with bootstrap form elements dynamically?

This is my JS fiddle : Demo

I have tried using the below JS code to dynamically replicate the form elements within the box (Expression LHS, RHS, Operator, Datatype) However, it did not work.

Could someone help me with this? Also, I will have to write it using Vue.js once I find help with Javascript/jQuery.

Any help would be much appreciated! Thank you!

     $('#addRow').click(function () {

           $('<div/>', {
               'class' : 'child-border', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');

     });

 function GetHtml()
{
      var len = $('.child-border').length;
    var $html = $('.parent-border').clone();
    $html.find('[name=lhs]')[0].name="lhs" + len;
    $html.find('[name=rhs]')[0].name="rhs" + len;
    $html.find('[name=data]')[0].name="data" + len;
    $html.find('[name=op]')[0].name="op" + len;

    return $html.html();    
}