title: Unable to set the value of input field onclick
body: <p>I have created this custom dropdown which has custom radio buttons.
  I get the value of the selected radio button and set it to span tag successfully.</p>
  
  <p>What i am not getting is : i want to set the same value in the input field that is present in the dropdown, but the value is not getting set.</p>
  
  <p>i use pure js as well as jquery to do so but the value is alerting and not setting into the input field.</p>
  
  <p>code is live here: <a href="http://thekabir.in/onsitego-planlisting2017/index.html" rel="nofollow noreferrer">http://thekabir.in/onsitego-planlisting2017/index.html</a></p>
  
  <p>Steps: click on check brands dropdown and select any brand..</p>
  
  <p>jquery and js used are</p>
  
  <pre><code>//filters dropdown   
  function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('div.dropdown li');
    this.val = '';
    this.index = -1;
    this.initEvents();
    }
    DropDown.prototype = {
    initEvents : function() {
        var obj = this;
        obj.dd.on('click',function(){
          $(this).toggleClass("active");
          $(this).parent().toggleClass("border-active");
          $('.filters').toggleClass('border-bottom');
          $(this).children('.dropdown').css('width',$(window).width());
          var deID = $(this);
  
          if(deID[0].id == 'devicebrand')
          {
            $('#devicebrand i.icon-down-arrow-1').addClass('icon-up-arrow-1').removeClass('icon-down-arrow-1');
          }
          return false;
        });
        obj.opts.on('click',function(e){
            // e.preventDefault();
            $(this).parent().addClass('hidden');
            $(this).addClass('active');
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
            var currentID = $(this).parents('div.wrapper-dropdown-3')[0].id;
  
            if(currentID == 'devicebrand')
            {
              $('#devicebrand.wrapper-dropdown-3 .dropdown li').removeClass('active');
              $('#devicebrand.wrapper-dropdown-3 .dropdown li span').removeClass('icon-selected-radio-yellow').addClass('icon-oval-3-copy-3');
              $('#devicebrand i.icon-up-arrow-1').addClass('icon-tick-filled').removeClass('icon-up-arrow-1');
              $('.more-brands').addClass('hidden');
              $('.covered').removeClass('hidden');
              $('#manual-brand-input').val(obj.val);
            }
            $(this).children('span').removeClass('icon-oval-3-copy-3').addClass('icon-selected-radio-yellow');
            $(this).parent().toggleClass("border-active");
            $('.dropdown input').val('');
            e.stopPropagation();
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
    };
    $(function() {
    var dd = new DropDown( $('#devicebrand') );
    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });
    });
  </code></pre>
  
  <p>Html :</p>
  
  <pre><code>&lt;div class="filter check-brand"&gt;
      &lt;div id="devicebrand" class="wrapper-dropdown-3" tabindex="1"&gt;
        &lt;i class="icon icon-brand"&gt;&lt;/i&gt;
        &lt;span data-val="-1"&gt;check brand &lt;/span&gt;
        &lt;div class="dropdown brand"&gt;
          &lt;span class="icon-cross-it"&gt;&lt;/span&gt;
          &lt;div class="side-info"&gt;
            &lt;p class="SELECT-YOUR-MOBILE-P"&gt;SELECT YOUR MOBILE BRAND  &lt;/p&gt;
            &lt;p class="One-line-to-explain"&gt;One line to explain why he needs to select his city. Along with more information.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="city-selection"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="htc"&gt;HTC&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="motorola"&gt;motorola&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="xiaomi"&gt;xiaomi&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="lg"&gt;LG&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="samgsung"&gt;samgsung&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="sony"&gt;sony&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="huawei"&gt;huawei&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="google pixel"&gt;google pixel&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="nokia"&gt;nokia&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="icon-oval-3-copy-3"&gt;&lt;/span&gt;&lt;a href="#" data-val="le-eco"&gt;le-eco&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class="more-brands"&gt;
              &lt;a class="more-brands-btn" href="javascript:void(0);"&gt;+ 254 Brands&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="manual-brand"&gt;
              &lt;input placeholder="Enter your brand if not found above " id="manual-brand-input" class="manual-brand-input ui-autocomplete-input" value="" autocomplete="off" type="text"&gt;&lt;span class="icon-shape_4"&gt;&lt;/span&gt;
            &lt;ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"&gt;&lt;/ul&gt;&lt;/div&gt;
            &lt;div class="covered hidden"&gt;
              &lt;p&gt;&lt;span class="icon-tick"&gt;&lt;/span&gt;Congratulations! Free Pick &amp;amp; Drop service available in your city&lt;/p&gt;
              &lt;p&gt;&lt;span class="icon-tick"&gt;&lt;/span&gt;400 Service centers near you&lt;/p&gt;
              &lt;p&gt;&lt;span class="icon-tick"&gt;&lt;/span&gt;20% of people bought this near your locality&lt;/p&gt;
              &lt;p&gt;&lt;span class="icon-tick"&gt;&lt;/span&gt;3days is average repair time in your area.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="not-covered hidden"&gt;
              &lt;p&gt;&lt;span class="icon-not-covered-tick"&gt;&lt;/span&gt;Sorry, we are currently present in India. We don’t cover your City.&lt;/p&gt;
              &lt;p&gt;We can briefly state here why we dont cover particular city. Or if at all we are in process of including it.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;i class="icon-down-arrow-1"&gt;&lt;/i&gt;
        &lt;i class="icon-orange-cross hidden"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is the fiddle for the same. 
      <a href="https://jsfiddle.net/kvab7wyd/1/" rel="nofollow noreferrer">https://jsfiddle.net/kvab7wyd/1/</a></p>