Adding a replica of some DOM elements on click
First suggestion

One first refactoring idea is to create a function that creates an element, sets its attributes and adds it to a parent element.

function createElement(elementType, classes, parent) {
    var e = document.createElement(e);
    e.setAttribute('class', classes);
    parent.appendChild(e);
    return e;
}


You could also separate your structure from your DOM manipulation.
I suggest you create your structure as a JSON, and then create the nodes recursively.

For example, you could define your structure as:

{
  element: 'div',
  class: 'col-wd-12 col-md-6 col-sm-4',
  children: [{
    element: 'div',
    class: 'col loby',
    children: [
      //...
    ]
  },
  // ...
}


and then: 

function createDOMElements(data) {
  // ...

  // create the element
  var elem = document.createElement(data.element);

  // add its attributes
  for (var attribute in data) {
    if (data.hasOwnProperty(attribute) &amp;&amp; attribute !== 'element' &amp;&amp; attribute !== 'children') {
      var attributeValue = data[attribute];
      elem.setAttribute(attribute, attributeValue);
    }
  }
  // ...

  // add the children (forEach is from ES5 on)
  data.children.forEach(function(child) {
    // recursive call to create child elements
    var childElement = createDOMElements(child);
    elem.appendChild(childElement);
  });

  return elem;
}


Here is a jsfiddle with the whole working example.

Second suggestion (less JS)

You could create a hidden HTML 'template' and display it when needed.

You can set:


visibility to hidden if you still want to affect the layout (take the space needed)
or display to none


in css (more info here) directly in the style attribute or through a class. On the click event you make this element visible.

The HTML: 

  &lt;div id="template" class="col-wd-12 col-md-6 col-sm-4" style="display:none;"&gt;
      &lt;!-- all the children --&gt;
  &lt;/div&gt;


And then in the JS:

document.getElementById("addLobby").addEventListener("click", function(e) {
  document.getElementById("template").style.display = "initial";
});


Here is the second fiddle.

If you need to add the template multiple times, or if you have multiple templates on your page, you should define them at the end on the page.
When needed, clone the template and append it to the desired parent.

Conclusion

If you don't have a particular need to create the elements in the JS, I think the second solution it's more elegant (and less code ;) )