jQuery click event on Select element not working as desired on Chrome 54
<p>I have this code:</p>

<p>HTML</p>

<pre><code> &lt;select class="form-control" name="footerLayout"&gt;

      &lt;option value=""&gt;
      &lt;/option&gt;
      &lt;option value="1"&gt;
        1 column
      &lt;/option&gt;
      &lt;option value="2"&gt;
        2 column
      &lt;/option&gt;

    &lt;/select&gt;


    &lt;div class="column column-1"&gt;
      &lt;h3&gt;Content&lt;/h3&gt;

      &lt;textarea class="form-control" type="text" name="footerContent"&gt;&lt;/textarea&gt;
    &lt;/div&gt;

    &lt;div class="column column-2"&gt;
      &lt;h3&gt;Content2&lt;/h3&gt;

      &lt;textarea class="form-control" type="text" name="footerContent"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.column-1 {
  display: none;
}

.column-2 {
  display: none;
}
</code></pre>

<p>Jquery</p>

<pre><code> $('[name=footerLayout]').click(function() {
      var selector = ".column-" + $(this).val(); //Create selector        
      $(".column").not(selector).hide(); //Hide others        
      $(selector).show(); //Show column based on selected value
    });
</code></pre>

<p>If i click on an option from the select tag it doesn't show the hidden div right away. I would have to click it 2 times in order for it to work.</p>

<p>try it yourself: </p>

<p><a href="https://jsfiddle.net/mk425srx/" rel="nofollow">https://jsfiddle.net/mk425srx/</a></p>

<p>Notice you must click the option 2 times for it to work, I want this to be 1 time. It has to change directly. How do i achieve this. 
EDIT
Its working fine in firefox and chrome 53 apparently its a chrome 54 issue..</p>