Dynamic jQuery AppendTo Selector

Question

I have an HTML page that is adding a toolbar to an item. That page is using some static IDs to make this happen. The most important line of code looks like this:

$('#tb').appendTo('.item-toolbar');

The above works as expected for a single item. But now, I'm trying to make this so that it work with multiple items. In an attempt to do this, I've created this fiddle . The most important code looks like this:

function moveNugget() {
  var selected = $('#selector').val();
  var tb = $('#tb');

  var items = $('.item-container');

  // The following line is the one that is giving me problems.
  //.appendTo('.item-toolbar');
}

If you visit the Fiddle , it will be more clear. Basically, a user can choose 1, 2, or 3 from a drop down. Once selected, the tool bar should be "appended to" the corresponding item-toolbar . My challenge is, I can't figure out how to create the selector to a dynamically selected item and use the appendTo function.

I really want to use the appendTo because my actual code is more complicated. I've tried to strip it down to the part that is giving me the issue. It's clearly my approach to using appendTo . Right now, I'm trying:

$(tb).appendTo('.item-toolbar');

However, this approach completely disregards the selected item. I'm not sure how to use the selected items toolbar within the context of appendTo .

Answer 1

Try:

function moveNugget() {
  var selected = $('#selector').val();
  var tb = $('#tb');
  var items = $('.item-container .item-toolbar')[selected];
  // The following line is the one that is giving me problems.
  tb.appendTo(items);
}

Answer 2

One of the variant of realization:

1. Add unique ids on each item-toolbar (For example view-0, view-1, view-2)

It will look like this:

<select id="selector">
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
</select>
<button onclick="moveNugget();">
 Move
</button>
<br /><br />

<div class="view">
  <div class="item-container">
    <div class="item-title">
      [title]
    </div>
    <div id="view-0" class="item-toolbar">
      [tb]
    </div>
  </div>
</div>

<br />
<hr />
<br />

<div class="view">
  <div class="item-container">
    <div class="item-title">
      [title]
    </div>
    <div id="view-1" class="item-toolbar">
      [tb]
    </div>
  </div>
</div>

<br />
<hr />
<br />

<div class="view">
  <div class="item-container">
    <div class="item-title">
      [title]
    </div>
    <div id="view-2" class="item-toolbar">
      [tb]
    </div>
  </div>
</div>

<br /><br /><br />
<ul id="tb" style="list-style-type: none;">
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
</ul>

2. Then when you click on button you can append your toolbar to appropriate block

Here is changed function code:

function moveNugget() {
  var selected = $('#selector').val();
  var tb = $('#tb');

  var items = $('.item-container');

  // Add toolbar to appropriate block
  tb.appendTo('#view-' + selected);
}

Fiddle