title: First word wrap with <span> and remaining text wrap with another <span> separated with <br> tag using Jquery
body: <p>I want to add first word in one  tag and remaining text in another  tag separated with <br> between them. Basically I want this type of html structure.</p>
  
  <pre><code>&lt;div class="hotspot-name"&gt;
    &lt;span&gt;Building&lt;/span&gt;
    &lt;br/&gt;
    &lt;span&gt;One text text&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Whatever I have tried mentioned in below snippet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".hotspot-name span").each(function () {
    var html = $(this).html().split(" ");
    html = html.slice(0, -1).join(" ") + " &lt;br /&gt;" + html.pop();
    $(this).html(html);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hotspot-name{margin-top:10px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;div class="hotspot-name"&gt;
    &lt;span&gt;Building One&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="hotspot-name"&gt;
    &lt;span&gt;Building Two test test&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="hotspot-name"&gt;
    &lt;span&gt;Building Three test test&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="hotspot-name"&gt;
    &lt;span&gt;Building Four&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks!!</p>