Getting currency data out of an array I have a button dropdown that you can select different currencies from. When you select one, it replaces the button value with that currency type, and displays the currency symbol in a span in front of an input. 

I have done some refactoring where I now have just one function getCurrency() that accepts parameters and inserts the proper values, but in here $(".dropdown-menu li").click( function(){...} I have 3 different if else statements. I know there has to be a way to do this by looping through my currencyData array and use this to target a specific element, but I cannot figure it out. 

I want to make this more modular so it can scale up. If I had 30 different currencies, this would not work. I would have to change too many lines of code, where I should just be able to add another currency to the array. 

It is live, you can view it here.

JS    

var currencyData = [
  {
    "currency": "USD",
    "symbol" : "$"
  },
  {
    "currency": "EUR",
    "symbol" : "€"
  },
  {
    "currency": "JPY",
    "symbol" : "¥"
  }
];

/*
 * Inserts &lt;li&gt; list of values into the currency dropdown
*/
$.each( currencyData, function( key, val ) {

  var $li = $("&lt;li name='currency'&gt;&lt;a href='#'&gt;" +
    val.currency + "&lt;/a&gt;&lt;/li&gt;");

  $(".dropdown-menu").append( $li );
 });

/*
 * Generate currency symbol and type and swap them depending on which is clicked
*/
$(".dropdown-menu li").click( function() {

 if ( this.textContent === currencyData[0].currency ) {
    getCurrency(currencyData[0].currency, currencyData[0].symbol);

 } else if ( this.textContent === currencyData[1].currency ) {
    getCurrency(currencyData[1].currency, currencyData[1].symbol);

 } else if ( this.textContent === currencyData[2].currency ) {
    getCurrency(currencyData[2].currency, currencyData[2].symbol);
 };
});

/*
 * Swap currency type and symbol
*/
function getCurrency(currency, symbol) {
  // inserts visible currency symbol to form
  var $span = $("&lt;span class='js-currency-symbol' &gt; " + symbol + "&lt;/span&gt;");

  // hidden input to save currency symbol
  var $input = $("&lt;input type='text' class='js-hidden-currency-symbol' value=" +
   symbol + " style='display:none' name='currencySymbol'&gt;");

  $('.js-currency-symbol').remove();
  $('.js-currency-btn').text( currency );
  $('.js-input-amount-prepend').append( $span );

  $('.js-hidden-currency-symbol').remove();
  $('.js-currency-btn-group').append( $input );
};


HTML

&lt;div class="form-group"&gt; &lt;!-- Currency Input Section--&gt;
    &lt;div class="wrapper"&gt;
      &lt;span class="js-input-amount-prepend input-amount-prepend"&gt;Amount:&lt;/span&gt;
      &lt;!-- INSERT  &lt;span class="js-currency-symbol"&gt; --&gt;
      &lt;input type="text" required class="js-payment-amount-input payment-amount-input" name="amount" placeholder="enter amount"&gt;
      &lt;div class="btn-group js-currency-btn-group currency-btn-group"&gt;
        &lt;button type="button" class="btn js-currency-btn currency-btn"&gt;Currency&lt;/button&gt;
        &lt;button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;!-- INSERT li Items --&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- INSERT Hidden currency symbol input --&gt;
    &lt;/div&gt;
  &lt;/div&gt; &lt;!-- End Currency Input Section--&gt;
Work with indices instead of elseif statements

You should write a function that identifies the index of this.textContent in the currencyData array. Why not try something like this:

function myIndexOf(o) {    
    for (var i = 0; i &lt; currencyData.length; i++) {
        if (currencyData[i].currency == o) {
            return i;
        }
    }
    return -1;
}


Taken from this Stackoverflow answer.

Then you can run:

currentIndex = myIndexOf(this.textContent)
getCurrency(currencyData[currentIndex].currency, currencyData[currentIndex].symbol);


And it's entirely extensible.

Avoid unnecessary HTML updates

Seems like you can reduce $span to only update the innerHTML of a span element rather than reinitializing your span element each time you append it to $('.js-input-amount-prepend'). This would slightly shorten getCurrency