Polymer simple element

I'm having a hard time understanding how to create Web Components using Polymer. My purpose is just to display a string, an input-text and a button, when the button is clicked; the String is updated with the actual value of the input text.

Here is my first try :

<link rel="import" href="./../bower_components/polymer/polymer.html">

<dom-module id="neito-sidebar">
    <template>
        <style>

        </style>

        <label for="test">Name : </label>
        <input type="text" name="test" id="test">
        <button on-tap="_updateSpan">Valider</button>
        <span>[[mot]]</span>

    </template>
    <script>
        Polymer({
            is: 'neito-sidebar',
            properties: {
                mot: String,
                notify: true
            },

        _updateSpan: function()
        {
            this.mot = $('#test').val();
        }
        });

    </script>
</dom-module>

Am I close to the result or do I have everything wrong ?

Oh I forgot, here the index.html that call my components :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="import" href="./components/neito-sidebar.html">
    <link rel="import" href="./bower_components/polymer/polymer.html">
    <link rel="import" href="./bower_components/jquery/dist/jquery.js">
    <title>Polymer Element</title>
</head>
<body>
    <neito-sidebar></neito-sidebar>
</body>
</html>

And here is the structure of the project :

Solution

Actually, if you like to do with Polymer way, it's so easy, and even you don't need any js code either any button. What you input, will be appearing in the span.

<link rel="import" href="./../bower_components/polymer/polymer.html">
<link rel="import" href="./../bower_components/iron-input/iron-input.html">
<dom-module id="neito-sidebar">
    <template>
        <style></style>
        <iron-input bind-value="{{mot}}">
           <label for="test">Name : </label>
           <input id="test" type="text"  value="{{mot::input}}">
        </iron-input>
        <span>[[mot]]</span>
    </template>
    <script>
        Polymer({is: 'neito-sidebar' });
    </script>
</dom-module>

<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="iron-input/iron-input.html">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<x-foo></x-foo>

<dom-module id="x-foo">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }
      span { 
         color:red;
      }
    </style>
        <iron-input bind-value="{{mot}}">
           <label for="test">Name : </label>
           <input id="test" type="text"  value="{{mot::input}}">
        </iron-input>
     <br/>
     <span>[[mot]]</span>
    </template>
<script>
    HTMLImports.whenReady(function() {
    class XFoo extends Polymer.Element {
      static get is() { return 'x-foo'; }
      static get properties() { return { 
        
     }};
    static get observers() { return []}
   
 }
customElements.define(XFoo.is, XFoo);
 });
    
</script>
</dom-module>
</body>
</html>