How to detach and reattach elements

Question

I'm trying to adjust a page to be more responsive. I have created 2 divs - one for mobile resolution and one for screens resolution.

I have a form in each of them which should get data from db using ajax. Each div contains the same elements :form, inputs and submit button.

I need to detach one of the divs in each resolution for the ajax request to work because otherwise - the request could not handle 2 elements with the same name and classes....

I've tried to work it out in css using display:none - but still - the element appears.

What I wish to achieve is detaching the ( mobile ) and attaching another instead.

I need something like this :

var screen = $('#screen');
var mobile = $('#mobile');

    if ($(window).width() > 916) {

        $('#screen').detach();
        $('#mobile').append('.container');//this won't work

    }
    else {
        $('#mobile').detach();
        $('#screen').append('.container');//this won't work

    }

Here is my base layout. Fidddle

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container col-md-12">

  <div id="mobile" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>

  <div id="screen" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>
</div>

Answer 1

Going by your attempted code, you need to use the cached versions you store to the variables

var screen = $('#screen');
var mobile = $('#mobile');

if ($(window).width() > 916) {

    $('#screen').detach();
    mobile.appendTo('.container'); //this should now work
}
else {
    $('#mobile').detach();
    screen.appendTo('.container'); //this should now work
}

---

But you should really approach this through CSS and media queries.
(Your code as it currently stands has issues in that it contains duplicate IDs in the HTML, and is pointless since both forms are identical)

Answer 2

You could go pure CSS via media queries:

#mobile {
  display: none;
}

@media (max-width: 916px) {
  #screen {
    display: none;
  }

  #mobile {
    display: block;
  }
}