title: Js/jQuery - How to hide/show an input created on the fly?
body: <p>This code creates a group of elements (four inputs) on the fly. Once you create an element (four inputs) you can select/deselect, when you select an element will bring up the editor for the corresponding element. I've made a function to hide only the first element. The problem is that I can not make it comeback without affecting the other elements. </p>
  
  <p>Instructions:</p>
  
  <p>Click on the "Price" link, an element will be created on the fly (four nested inputs)
  Select the element (four nested inputs) to bring up the editor ( one input and a brown little square).
  Click on the little brown square to hide the first input of the element (four nested inputs) and that will hide the first input. 
  I need the little brown square to hide and show the same input.</p>
  
  <p>Go here to see the full code:
  To see the problem you have to create more than one element to find out.</p>
  
  <p><a href="http://jsfiddle.net/yjfGx/13/" rel="nofollow">http://jsfiddle.net/yjfGx/13/</a></p>
  
  <p>This is the JS/jQuery code, for the full code go to the link above.</p>
  
  <pre><code>var _PriceID = 1;
  $('#Price').on('click',function(){
  
          var label = 'Price'
          var Id = 'Price_';
                      var P = $( '&lt;p class="inputContainer" /&gt;' ).fadeIn(100);
                      var l = $( '&lt;label /&gt;' ).attr({'for':Id + _PriceID, 'id':Id + _PriceID, 'class':'priceLb'}).text( label ).after('&lt;br/&gt;');
                      var l1 = $( '&lt;span class="dollar-sign" /&gt;' ).text( '$' ).css({"font-family":"Arial", "color":"#333", "font-weight":"bold"});
                      var input1 = $( '&lt;input /&gt;' ).attr({ 'type':'text', 'name':'', 'class':'inputs',
                                                           'maxlength':'3', 'placeholder':'one', 
                                                           'id':Id + _PriceID, 'class':'pricePh-1' })
                                                           .css({ "width":"60px", "paddingLeft":"1.3em", "paddingRight":"0.2em", "margin":"3px" });
  
                      var l2 = $( '&lt;span class="priceComma-1" /&gt;' ).text( ',' ).css({"font-family":"Arial", "color":"#333", "font-weight":"bold"});
                      var input2 = $( '&lt;input /&gt;' ).attr({ 'type':'text', 'name':'', 'class':'inputs', 'maxlength':'3',
                                                           'placeholder':'two', 'id':Id + _PriceID, 'class':'pricePh-2' })
                                                           .css({ "width":"68px", "paddingLeft":"0.7em", "paddingRight":"0.2em", "margin":"3px" });
                      var l3 = $( '&lt;span class="priceComma-2" /&gt;' ).text( ',' ).css({"font-family":"Arial", "color":"#333", "font-weight":"bold"});
                      var input3 = $( '&lt;input /&gt;' ).attr({ 'type':'text', 'name':'', 'class':'inputs', 'maxlength':'3',
                                                           'placeholder':'three', 'id':Id + _PriceID, 'class':'pricePh-3' })
                                                           .css({ "width":"64px", "paddingLeft":"1em", "paddingRight":"0.2em", "margin":"3px" });                                                                                                         var l4 = $( '&lt;span /&gt;' ).text( ',' ).css({"font-family":"Arial", "color":"#333", "font-weight":"bold"});
                      var input4 = $( '&lt;input /&gt;' ).attr({ 'type':'text', 'name':'', 'class':'inputs', 'maxlength':'2',
                                                           'placeholder':'four', 'id':Id + _PriceID, 'class':'pricePh-4' })
                                                           .css({ "width":"37px", "paddingLeft":"0.5em", "paddingRight":"0.2em", "margin":"3px" }); 
  
                      P.append( l, l1, input1, l2, input2, l3, input3, l4, input4);
                       var D = $( 'form' );
                           P.on({
                               mouseenter: function() {
                                   $(this).addClass("pb");
                               },
                               mouseleave: function() {
                                   $(this).removeClass("pb");
                               }
                           });
                           P.appendTo(D);
                           _PriceID++;
  
  
  });
  
  
  
  /*** Select element individually and load editor. ***/
  var flag = false;
  $("form").on("click", "p", function () {
  var cur = $(this).css("background-color");
  
  if (cur == "rgb(255, 255, 255)") {
      if (flag == false) {
        $(this).css("background-color", "#FDD");
  
  
           LoadPriceProperties($(this));
        flag = true;
  
      }
  
  
  
  } else {
  $(this).css("background-color", "white");
  $('.properties-panel').hide();
  
  flag = false;
  }
  
  });
  
  
  /*** Element editor ***/
  var LoadPriceProperties = function (obj) {
  $('.properties-panel').css('display', 'none');
  $('#priceProps-edt').css('display', 'block');
  
  
  var label = $('.priceLb', obj);   
  var price1 = $('.pricePh-1', obj);
  var price2 = $('.pricePh-2', obj);
  
  
  $('#SetPricePlaceholder-1').val(price1.attr('placeholder'));
  $('#SetPricePlaceholder-2').val(price2.attr('placeholder'));
  
  /*** Getting an answer, depending on what they click on. ***/
  $('#fieldOptionsContainer_1 div').bind('click', function () {
  if ($(this).hasClass('field-option-delete')) {
      RemoveUnwantedPriceField1($(this));
  } else {
  /*** Function loacated on "line 98" ***/     
  HideUnwantedPriceField_1($(this));  
  }   
  });
  
  _CurrentElement = obj;
  };
  
  function HideUnwantedPriceField_1() {   
  
  var input = $('.pricePh-1', _CurrentElement);
  var comma = $('.priceComma-1', _CurrentElement);
  
  
  if($(input).is(":hidden")){
  
  
  } else {
  input.hide();
  comma.hide();
  }
  
  
  
  } 
  </code></pre>