title: Elm Multiple Counter code using List
body: <p>Im new to Elm , previously I was doing <code>React</code>, <code>Redux</code> , <code>ES6</code>
  Need help optimizing the below counter example using <code>Array</code> rather than <code>List</code>.
  Getting error Type mismatch When I tried to use <code>Array Set/Get</code> methods. </p>
  
  <pre><code>import Html exposing (beginnerProgram, div, button, text, p, Html, span)
  import Html.Events exposing (onClick)
  import Array
  
  main =
    beginnerProgram { model = [0,7], view = view, update = update }
  
  
  view model =
    div []
      [ div [] [ button [ onClick AddCounter ] [ text "Add Counter" ] ]
        , div [] (List.indexedMap  (\index data -&gt; (viewCounter index data)) model)
      ]
  viewCounter: Int -&gt; Int -&gt; Html Msg
  viewCounter index data =
      div [] [
      p [] [text ("Counter " ++ toString index )]
      , button [ onClick (Decrement index) ] [ text "-" ]
      , span [] [ text (toString data) ]
      , button [ onClick (Increment index) ] [ text "+" ]
      ]
  
  
  type Msg = 
    AddCounter 
    | Increment Int
    | Decrement Int
  
  incrementSelectedIndex index selectedIndex data = 
    if index == selectedIndex then data + 1
    else data
  
  decrementSelectedIndex index selectedIndex data = 
    if index == selectedIndex then data + 1
    else data
  
  
  update msg model =
    case msg of
      AddCounter -&gt;
        List.append model [0] 
  
      Increment selectedIndex -&gt;
        (List.indexedMap  (\index data -&gt; 
          (incrementSelectedIndex index selectedIndex data)) model)  
  
      Decrement selectedIndex -&gt;
        (List.indexedMap  (\index data -&gt; 
          (decrementSelectedIndex index selectedIndex data)) model) 
  </code></pre>