title: How to add clear button on special input type
body: <p>I need to use this <a href="http://vitalets.github.io/x-editable/docs.html" rel="nofollow" title="x-editable plugin">x-editable plugin</a> with the <a href="http://vitalets.github.io/x-editable/demo-bs3.html" rel="nofollow" title="bootstrap3-demo">bootstrap3 version</a>.</p>
  
  <p>Like you can see in the x-editable bootstrap3 demo, we can add custom input with several fields. But in the example, each input haven't a "clear button" (like the type="text").</p>
  
  <p>I've created my own custum input (with 2 input text); And I tried to add this buttons to my inputs but they don't work good. Only one input is recognize; I know why but I don't know how make it good.</p>
  
  <p>part of my name.js (for example)</p>
  
  <pre><code>$.extend(Name.prototype, {
      /**
      Renders input from tpl
  
      @method render() 
      **/        
      render: function() {
         this.$input = this.$tpl.find('input');
         this.renderClear();
      },
  
      //render clear button
      renderClear:  function() {
         if (this.options.clear) {
              console.debug('clearBtn');
  
             this.$clear = $('&lt;span class="editable-clear-x"&gt;&lt;/span&gt;');
             this.$input.after(this.$clear)
                        .css('padding-right', 24)
                        .keyup($.proxy(function(e) {
                            //arrows, enter, tab, etc
                            if(~$.inArray(e.keyCode, [40,38,9,13,27])) {
                              return;
                            }                            
  
                            clearTimeout(this.t);
                            var that = this;
                            this.t = setTimeout(function() {
                              that.toggleClear(e);
                            }, 100);
  
                        }, this))
                        .parent().css('position', 'relative');
  
             this.$clear.click($.proxy(this.clear, this));
         }         
      },
  
      //show / hide clear button
      toggleClear: function(e) {
          if(!this.$clear) {
              return;
          }
  
          var len = this.$input.val().length,
              visible = this.$clear.is(':visible');
  
          if(len &amp;&amp; !visible) {
              this.$clear.show();
          } 
  
          if(!len &amp;&amp; visible) {
              this.$clear.hide();
          } 
      },
  
      clear: function() {
        console.debug('clearClick');
         this.$clear.hide();
         this.$input.val('').focus();
      },// .. other code here ..
      });
  </code></pre>
  
  <p>I probably need to use .each() before the .after() but I don't know how can I do it.</p>
  
  <p>I found this renderClear (and others) method in the Text class in the main js of the plugin.</p>
  
  <p>Thanks for your help.</p>