title: jQuery x-editable plugin on dynamic fields?
body: <p>I have made a script which enables adding of dynamic inputs on click of a button and removing unwanted inputs with a corresponding x button. My need is to add the <strong>x-editable</strong> plugin on every newly created dynamic input. I'm using x-editable, in such way, that on a selected option from the x-editable popup, an input from the right side gets a value which corresponds to option selected.</p>
  
  <p>I have made that work with static elements but with dynamic ones I have big problems.
  First of all, together with all html structure, classes of all dynamic elements are generated with its <strong>classname + number of dynamic field</strong>. precisely I'm doing this with configured Fieldcount: <code>var FieldCount = 1;</code> and then in part where the generation of html code was made you add something like <code>class="privacy-dynamic'+ FieldCount +'"</code>. And then the first dynamic element gets the class in html code called <code>privacy-dynamic2</code> , second gets <code>privacy-dynamic3</code> and so on.</p>
  
  <p>Now, my first conclusion is that I need somehow to add a similar option to x-editable in which I would create a script with same  <code>+ FieldCount +</code> so every x-editable pop up would correspond to its 'result input' from left rather than one popup to all dynamically made inputs.</p>
  
  <p>I tried to generate a x-editable script in the same way I generate my html structure and it did not worked. Silly try from me, I know, generating script with script, but I was desperate.</p>
  
  <p>Truly I don't know how it could be solved, I'm a bit of a jquery noob, and I'm lost in it. Can it even be solved somehow?</p>
  
  <p>Here is current situation in which you have the first static field with x-editable working, and dynamic fields with same structure for x-editable but without the script for them: <a href="http://jsfiddle.net/dzorz/QxMs7/" rel="nofollow">http://jsfiddle.net/dzorz/QxMs7/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container"&gt;    
      &lt;input type="text" class="main_activity" id="main_activity" name="main_activity" placeholder="Main activity"&gt;
      &lt;div class="parentToDelegate"&gt;
          &lt;a href="#" id="privacy" class="privacy" data-type="select" data-pk="1" data-value="1" data-original-title="Select visibility"&gt;public&lt;/a&gt;
          &lt;input type="text" id="privacy_result" class="privacy_result" value="1"/&gt;     
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div id="InputsWrapper"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;span id="AddMoreBox" class="btn btn-info pull-right"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;Add More&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>script:</p>
  
  <pre><code>//x-editable
  $('.privacy').editable({
      showbuttons: false,
      unsavedclass: null,
      type: 'select',
      inputclass: 'input-medium privacy-select',
      source: [
          {value: 1, text: 'public'},
          {value: 2, text: 'approved contacts only'},
          {value: 3, text: 'matching contacts'},
          {value: 4, text: 'invisible'}
      ],
  
  });
  
  $(function(){
          $('.parentToDelegate').on('change keyup blur', ".privacy-select", function(){
              $('.privacy_result').val($('.privacy-select').val());
          }).blur();
      });
  
  //dynamic fields
  $(document).ready(function() {
  
  var MaxInputs       = 5; //maximum input boxes allowed
  var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
  var AddButton       = $("#AddMoreBox"); //Add button ID
  
  var x = InputsWrapper.length; //initlal text box count
  var FieldCount=1; //to keep track of text box added
  
  $(AddButton).click(function (e)  //on add input button click
  {
  //         if(x &lt;= MaxInputs) //max input box allowed
  //         {
          FieldCount++; //text box added increment
          //add input box
          $(InputsWrapper).append('\
          &lt;div&gt;\
          &lt;input type="text" class="other_activity"\
          name="other_activity" id="other_activity"\
          placeholder="Other activity" style="margin:0px 15px 10px 0px"/&gt;\
          &lt;a href="#" class="removeclass"&gt;&lt;i class="icon-remove icon-remove-add"&gt;&lt;/i&gt;&lt;/a&gt;\
              &lt;div class="parentToDelegate-dynamic'+ FieldCount +' parent-dynamic"&gt;\
                  &lt;a href="#" id="privacy-dynamic" class="privacy-dynamic'+ FieldCount +'" data-type="select" data-pk="1" data-value="1" data-original-title="Select visibility"&gt;public&lt;/a&gt;\
                  &lt;input type="text" id="privacy-result-dynamic'+ FieldCount +'" name="privacy-result-dynamic'+ FieldCount +'" class="privacy-result-dynamic'+ FieldCount +' privacy_dynamic" value="1"/&gt;\
              &lt;/div&gt;\
          &lt;/div&gt;');
          x++; //text box increment
  //         }
  return false;
  });
  
  $("body").on("click",".removeclass", function(e){ //user click on remove text
      if( x &gt; 1 ) {
              $(this).parent('div').remove(); //remove text box
              x--; //decrement textbox
      }
  
              $('.income_count').trigger('change');
              return false;
  });
  
  });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.container{
     padding-top:100px
  }
  
  .privacy_result, .privacy_dynamic{
      width: 40px;
  }
  
  .main_activity, .other_activity{
      width: 140px;
  }
  
  .parentToDelegate{
      display:inline;
  }
  
  .icon-remove-add{
      margin-left: -10px;
      margin-top: -8px;
  }
  
  .parent-dynamic{
      display: inline;
      top: -5px;
      left: 10px;
      position: relative;
  }
  </code></pre>
  
  <p>Any help or advice is welcome, you can edit my jsfiddle freely and post it back</p>