text1

text2

It seems there is no problem with your code, mostlikely its because you try to delete the content before the dom is ready.

You can check my working example below

EDIT----

I have tried using dynamic inserted content, its works fine too. Please check if there is any error logged in your browser console log

Regarding data-role flipswitch, thats the identifier that trigger flipswitch js

$(document).ready(function(){
    $("#content").append('<div id="btn_flip3">lorem ipsum dolor sit amet consectuer adisplicing elit</div>').trigger('create');
    
    $("#js-delete").on('click', function($evt){           
        $evt.preventDefault();
        $("#btn_flip3").html("content deleted");
  });
});

#content{ margin-bottom:20px; }

.control-box{
  padding:20px;
  background:#eee;
  border:#ddd solid 1px;
}

#js-delete{
  background:red;
  color:#fff;
  display: inline-block;
  padding:4px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content"></div>

<div class="control-box"><a id="js-delete">Delete Dynamic Content</a></div>

You should create form element like this $('<form>) and then you can use append method.

const forms_data = ['Name', 'Email'];
const form = $('<form>');

forms_data.forEach(name => {
  form.append($('<input>', {placeholder: name}))
})

$('body').append(form);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Update: You could use reduce to make array of inputs or jquery objects and then append that array to form element at once.

const forms_data = ['Name', 'Email'];

const inputs = forms_data.reduce((r, name) => {
  r.push($('<input>', {placeholder: name}))
  return r;
}, [])

$('form').append(inputs)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=""></form>