Super caret

HTML

<div class="line">
  <div class="item" style="left:5px">Item 1</div>
  <div class="item" style="left:60px">Item 2</div>
  <div class="item" style="left:120px">Item 3</div>
  <div class="item" style="left:180px">Item 4</div>
</div>

CSS

.caret{
  position:absolute;
  box-sizing:border-box;
  pointer-events: none;
}
.solid-white{
  border: solid white 1px;
}
.solid-black{
  border: solid black 1px;
}
.dash-black{
  border: dashed black 1px;
}
.dash-white{
  border: dashed white 1px;
}
.item{
  position: absolute;
}
.red{
  color:yellow;
  background-color:red;
}

JavaScript

var $caret = $('<div class="caret"></div><div class="caret"></div>')

function caretItem($item){
	if(!$item.data("caret")){ // We don't have caret
    // If someone else does remove it
    var $caretItem = $caret.data("item");
  	if($caretItem) 
    {
    	$caret.remove();
      $caretItem.removeData("caret")
    }
    
    $caret.width($item.width());
    $caret.height($item.height());
    $caret.css("left",$item.css("left"));
    $caret.css("top",$item.css("top"));
    
    $caret.data("item",$item);
    $item.data("caret",$caret);
  }
  
  var $itemLine = $item.closest(".line");
  if(!$caret.parent()[0] != $itemLine[0])
  {
  	$item.closest(".line").append($caret);
  }
}

$(".item").click(function(){
	var $item = $(this);
	caretItem($item);
});

$(document.body).on("keydown",function(){
	var $itemWithCaret = $caret.data("item")
	if($itemWithCaret) 
  {
    var $newItem = $itemWithCaret.next(".item");
    if(!$newItem.length){
     	$newItem = $itemWithCaret.closest(".line").children(".item").first();
    }
    caretItem($newItem);
  }	
  
});

var blackDash = false;
setInterval(function(){
	if(blackDash){
  	$caret.first().removeClass("solid-black").addClass("solid-white");
  	$caret.last().removeClass("dash-white").addClass("dash-black");
  }
  else
  {
  	$caret.first().removeClass("solid-white").addClass("solid-black");
  	$caret.last().removeClass("dash-black").addClass("dash-white");
  }
	blackDash=!blackDash;
},500)

setInterval(function(){
$(document.body).toggleClass("red");
},3000)