Stuck with this JavaScript function? No JQuery : I'm really stuck with this Script. I don't know how to solve my problem. I'm new to JavaScript. I can't use JQuery

The thing is, i have a table and i want to highlight the selected row on the onClick event, and at the same time i have to change the value of an input field, but for some reason when i first click the row the highlight effect gets stucked on that row, and also the value only changes after i click a row for the first time. It's really weird.  

Here is the jsfiddle:

https://jsfiddle.net/n32d72ve/4/

And the JavaScript code:

         var preEl ;
      var orgBColor;
      var orgTColor;
      function HighLightTR(el, backColor,textColor){
      if(typeof(preEl)!='undefined') {
         preEl.bgColor=orgBColor;
         try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
      }
       orgBColor = el.bgColor;
       orgTColor = el.style.color;
       el.bgColor=backColor;

        try{ChangeTextColor(el,textColor);}catch(e){;}
        preEl = el;
    
        addRowHandlers();
      }

      function ChangeTextColor(a_obj,a_color){  ;
         for (i=0;i<a_obj.cells.length;i++)
          a_obj.cells(i).style.color=a_color;
      }
  
      function addRowHandlers() {
        var table = document.getElementById("table-organizaciones");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[3];
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                        document.getElementById('id_org').value = id;
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
     }
     }


The html:

    <table id="table-organizaciones">

          <thead>
            <tr>
              <th class="col-xs-4">Nombre</th><th class="col-xs-4">Razon social</th><th class="col-xs-4">Pais</th>
            </tr>
          </thead>
          <tbody>
            <tr onClick="HighLightTR(this,'#c9cc99','cc3333');">            
              <td class="col-xs-4">Lo que sea</td><td class="col-xs-4">Lo que sea </td><td class="col-xs-4">Colombia</td><td>maybe</td>   
            </tr>
            <tr onClick="HighLightTR(this,'#c9cc99','cc3333');">            
              <td class="col-xs-4">Lo que sea</td><td class="col-xs-4">Lo que sea </td><td class="col-xs-4">Colombia</td><td>no</td>   
            </tr>
            <tr onClick="HighLightTR(this,'#c9cc99','cc3333');">            
              <td class="col-xs-4">Lo que sea</td><td class="col-xs-4">Lo que sea </td><td class="col-xs-4">Colombia</td><td>yes</td>   
            </tr>
          </tbody>
        </table>
        <input name="id" id="id_org" value="id">