JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <plain id='linkdiv' href='phone-condition' onclick="location.href = $(this).attr('href')+'?/phone-shipping-method?q1=AppleiPhone&x=103&y=13-ship-it-yourself/#iPhone';return false"></plain>
    <plain id='linkdiv3' href='phone-condition' onclick="location.href = $(this).attr('href')+'?/phone-shipping-method?q1=Windowsphone&x=69&y=9-ship-it-yourself/#windowsphone';return false"></plain>
</div>

<div>
      <plain id="linkdiv1" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/phone-shipping-method?q1=AppleiPhone&x=103&y=13-emailed-shipping-label/#iPhone';return false"></plain>
  <plain id='linkdiv4' href='phone-condition' onclick="location.href = $(this).attr('href')+'?/phone-shipping-method?q1=Windowsphone&x=69&y=9-emailed-shipping-label/#windowsphone';return false"></plain>
</div>

<div>
      <plain id="linkdiv2" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/phone-shipping-method?q1=AppleiPhone&x=103&y=13-shipping-label+box/#iPhone';return false"></plain>
  <plain id='linkdiv5' href='phone-condition' onclick="location.href = $(this).attr('href')+'?/phone-shipping-method?q1=Windowsphone&x=69&y=9-shipping-label+box/#windowsphone';return false"></plain>
</div>

CSS

.select {
    border-top: 1px solid #1b569e;
    background: #184b85;
    background: -webkit-gradient(linear, left top, left bottom, from(#1b569e), to(#184b85));
    background: -webkit-linear-gradient(top, #1b569e, #184b85);
    background: -moz-linear-gradient(top, #1b569e, #184b85);
    background: -ms-linear-gradient(top, #1b569e, #184b85);
    background: -o-linear-gradient(top, #1b569e, #184b85);
    padding: 8px 16px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    vertical-align: middle;
    width:25%;
}
.select:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}
.select:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

JavaScript

$(function(){
var url = "http://google.com/";
var nextLink = "<a href='" + url + "' class='select' style='cursor:pointer; cursor:hand;'>Next</a>";

var hash = window.location.hash; // retrieve current hash value (fragment identifier)
if (hash.indexOf('iphone') != -1)
{
    $("#linkdiv").append(nextLink);
    $("#linkdiv1").append(nextLink);
    $("#linkdiv2").append(nextLink);
}   
else if (hash.indexOf('windowsphone') != -1)
{
    $("#linkdiv3").append(nextLink);
    $("#linkdiv4").append(nextLink);
    $("#linkdiv5").append(nextLink);
}
});